@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');

/*----------------Common CSS-----------------*/
body {
  margin: 0;
   font-family: 'Poppins', sans-serif;
  background: #f2f2f2;
}

/* Layout wrapper */
.wrapper {
  display: flex;
  transition: margin-left 0.3s ease;
  position: relative;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 240px;
  background: #fff;
  border-right: 1px solid #eee;
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
  overflow-y: auto;
  transition: width 0.3s ease;
}
.sidebar.collapsed { width: 72px; }

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* Wrapper shifts */
.sidebar ~ .wrapper { margin-left: 249px; }
.sidebar.collapsed ~ .wrapper { margin-left: 72px; }

/* Middle & Right Panels */
.middle {
  flex: 0 0 75%;
  max-width: 75%;
  /*background: #212529;*/
  border-right: 1px solid #ddd;
  padding: 16px;
}
.right {
  flex: 0 0 25%;
  max-width: 25%;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

.wrapper.hide-right .right { display: none; }
.wrapper.hide-right .middle { flex: 1 1 100%; max-width: 100%; }

/* Make .middle full width on all mobile devices */
@media (max-width: 991px) {
    .middle {
        flex: 1 1 100% !important;  /* allow it to take full width */
        max-width: 100% !important;
        order: 1;                     /* ensures middle comes first */
    }

    .right {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        order: 2;                     /* right panel comes after middle */
        display: none;                /* hide by default on mobile */
    }
}


/* Toggle Button */
.toggle-btn {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 1000;
    padding: 2px 5px;
    border: none;
    border-radius: 4px;
    background: #4d5276;
    color: #fff;
  cursor: pointer;
}

/* Menu */
.menu {
  background:#293166;
  list-style: none;
  margin: 0; padding: 0;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 6px 0px;
}
.menu-item {
  display: flex; align-items: center;
  padding: 12px 16px;
  font-size: 14px; color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.menu-item:hover { color: #f8f8f8; }
.menu-item i {
  width: 24px; margin-right: 12px;
  font-size: 18px; text-align: center;
  color: #fff;
}
.sidebar a { color:#fff; text-decoration:none; font-size:14px; }
.sidebar.collapsed .menu-item span { display: none; }

/*----------------------Resume Upload CSS------------------------*/
.chat-container {
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  max-width: 100%;
  margin: auto;
}

/* Resume upload container (desktop) */
.resume-container {
  width: 400px;
  float: left;
  margin-right: 80px;
}

/* Chat header */
.chat-header {
  background: #c92424;
  color: #fff;
  padding: 8px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Messages area */
.chat-messages {
  height: 580px;
  overflow-y: auto;
  padding: 15px;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
}

/* Messages */
.message {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  max-width: 75%;
  word-wrap: break-word;
}
.message.sent {
  background: #C14FE9;
  color: #fff;
  margin-left: auto;
}
.message.received {
  background: #e4e6eb;
  color: #000;
  margin-right: auto;
}

/* Input area */
.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background: #fff;
  gap: 8px;
}
.chat-input input[type="text"] {
  flex: 1;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.chat-input input[type="file"] {
  display: none;
}
.chat-input button {
  background: #8a0d0f;
  color: #fff;
  border: none;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.chat-input button:hover {
  background: #c9243f;
}

/* File attachment preview */
.attachment-preview {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

/* -------- Mobile Friendly Adjustments -------- */
@media (max-width: 768px) {
  .resume-container {
    width: 100%;
    float: none;
    margin: 0 0 15px 0;
  }

  .chat-messages {
    max-height: 28vh; /* smaller on mobile */
    padding: 10px;
  }

  .message {
    max-width: 90%; /* allow wider messages */
    font-size: 14px;
  }

  .chat-input {
    flex-direction: column; /* stack input + button */
    gap: 6px;
  }

  .chat-input input[type="text"] {
    width: 100%;  /* full width */
    font-size: 15px;
  }

  .chat-input button {
    width: 100%; /* button also full width below */
    padding: 10px;
    font-size: 15px;
  }
}

/* Typing Loader */
.typing-loader {
  display: flex; gap: 5px; padding: 10px;
}
.typing-loader div,
.typing-loader::before,
.typing-loader::after {
  content: ''; width: 8px; height: 8px;
  background: #555; border-radius: 50%;
  animation: typing 1.2s infinite ease-in-out;
}
.typing-loader div { animation-delay: 0.2s; }
.typing-loader::after { animation-delay: 0.4s; }
@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/*---------------------- Dashboard CSS----------------------*/
.content .page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 3px 3px lightgrey;
    padding: 10px 5px;
}
.content .page-title h2 {
  font-size: 20px; font-weight: 600; color: #000;
}
.content .page-title p { font-size: 14px; color: #867a77; }
.content .block {
  margin: 25px 0; padding: 25px;
  background: #fff; border-radius: 5px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

/* Profile details */
.content .profile-detail {
  display: flex; flex-direction: column;
  font-size: 18px; padding: 5px 0;
}
.content .profile-detail strong {
  display: block; font-size: 14px; font-weight: 500;
  color: #9e9592; margin-bottom: 2px;
}

/* Utility Spacing (margin + padding) */
[class*="pad-"], [class*="mar-"] { display: block; }
.pad-1{padding:5px;} .pad-2{padding:10px;} .pad-3{padding:15px;} .pad-4{padding:20px;} .pad-5{padding:25px;}
.mar-1{margin:5px;} .mar-2{margin:10px;} .mar-3{margin:15px;} .mar-4{margin:20px;} .mar-5{margin:25px;}
.pad-x-1{padding:0 5px;} .pad-x-2{padding:0 10px;} .pad-x-3{padding:0 15px;} .pad-x-4{padding:0 20px;} .pad-x-5{padding:0 25px;}
.pad-y-1{padding:5px 0;} .pad-y-2{padding:10px 0;} .pad-y-3{padding:15px 0;} .pad-y-4{padding:20px 0;} .pad-y-5{padding:25px 0;}
.mar-x-1{margin:0 5px;} .mar-x-2{margin:0 10px;} .mar-x-3{margin:0 15px;} .mar-x-4{margin:0 20px;} .mar-x-5{margin:0 25px;}
.mar-y-1{margin:5px 0;} .mar-y-2{margin:10px 0;} .mar-y-3{margin:15px 0;} .mar-y-4{margin:20px 0;} .mar-y-5{margin:25px 0;}

/* Typography */
a { text-decoration: none; }
h2 { font-size: 18px; }
h3 { font-size: 16px; color:#000; }

/* Card */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
  color: #51598a;
  text-align: center;
  padding: 16px;        /* more breathing space */
  margin: 10px auto;    /* spacing between cards */
  max-width: 400px;     /* prevents cards from stretching too wide on desktop */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* -------- Mobile Friendly -------- */
@media (max-width: 768px) {
  .card {
    max-width: 100%;   /* full width on mobile */
    padding: 12px;     /* reduce padding to fit smaller screens */
    font-size: 14px;   /* slightly smaller text */
  }
}

@media (max-width: 480px) {
  .card {
    padding: 10px;
    font-size: 13px;
    border-radius: 6px;
  }
}


/* Buttons */
.btn, button {
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all .2s ease;
}
.btn { background:#111827; color:#fff; border:none; }
.btn:hover { background:#0b1220; }
.btn-secondary { background:#eee; color:#000; }
.btn-danger { background:#f8d7da; color:#842029; }
.btn-success { background:#d1e7dd; color:#0f5132; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Mock Interview */
.page-title { font-size: 22px; margin-bottom: 16px; }
.select { padding:10px 24px; border-radius:10px; border:1px solid #ddd; width:300px; margin:25px 0 0 15px; }

/* Progress */
.progress { height:8px; width:100%; border-radius:999px; overflow:hidden; margin:12px 0 22px; background:rgba(148,163,184,0.2);}
.bar { height:100%; width:0%; background:linear-gradient(90deg, var(--accent), #8b5cf6); transition:width .25s ease; }

/* Quiz answers */
.question { font-size:18px; font-weight:600; margin:12px 0 14px; }
.answers { display:grid; gap:10px; margin:10px 0; }
.answer {
  display:grid; grid-template-columns:22px 1fr; gap:12px;
  border:1px solid rgba(148,163,184,0.18);
  border-radius:12px; padding:12px;
  background:rgba(2,6,23,0.35);
  cursor:pointer; transition:.2s;
}
.answer:hover { border-color: rgba(99,102,241,0.6); }
.answer input { width:18px; height:18px; }

/* History table */
.history-container { margin-top:20px; padding:20px; border:2px solid #ddd; border-radius:12px; background:#f9f9f9; }
.history-table { width:100%; border-collapse:collapse; }
.history-table th, .history-table td { border:1px solid #ccc; padding:10px; }
.history-table th { background:#007bff; color:#fff; }

/* Roast Result Table */
.table-container { margin:auto; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead { background:#c14fe9; color:#fff; }
thead th { padding:14px; font-size:14px; text-transform:uppercase; }
tbody tr { border-bottom:1px solid #eee; transition:background .2s; }
tbody tr:hover { background:#f1f7ff; }
tbody td { padding:14px; font-size:13px; color:#333; }

/* Status */
.status { padding:6px 12px; border-radius:20px; font-size:12px; font-weight:bold; display:inline-block; text-align:center; }
.status.active { background:#d1e7dd; color:#0f5132; }
.status.pending { background:#fff3cd; color:#664d03; }
.status.inactive { background:#f8d7da; color:#842029; }

/* Responsive Tables */
@media (max-width: 700px) {
  thead { display: none; }
  tbody, tr, td { display:block; width:100%; }
  tr { margin-bottom:15px; background:#fff; border-radius:8px; padding:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
  td { text-align:right; padding-left:50%; position:relative; }
  td::before {
    content: attr(data-label);
    position:absolute; left:15px;
    font-weight:bold; color:#555;
  }
}

/* today*/
/* Default Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  padding: 20px;
  background: #1c2954;
  overflow-y: auto;
  transition: transform 0.3s ease;
  z-index: 1200;
}
.sidebar-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  background: #1c2954;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1300;
  font-size: 18px;
}

/* Hide on mobile by default */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.active {
    transform: translateX(0); /* Slide in */
  }
}

/* Default for mobile */
.sidebar ~ .wrapper {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

/* For desktop (≥ 992px) keep space for sidebar */
@media (min-width: 992px) {
  .sidebar ~ .wrapper {
    margin-left: 249px;
  }
}






/* Right panel - desktop default */
.right {
  flex: 0 0 25%;
  max-width: 25%;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

/* Wrapper adjustments when right panel hidden */
.wrapper.hide-right .right {
  display: none;
}
.wrapper.hide-right .middle {
  flex: 1 1 100%;
  max-width: 100%;
}

/* MOBILE RESPONSIVE */
@media (max-width: 992px) {
  .wrapper {
    flex-wrap: wrap; /* stack panels */
  }

  .middle {
    order: 1;
    width: 100%;
    max-width: 100%;
  }

  .right {
    order: 2;
    width: 100%;
    max-width: 100%;
    display: none; /* hide by default */
    margin-top: 15px;
  }

  .right.active {
    display: flex;
        flex: 1;
        position: fixed;
  }

  /* Toggle button adjustments */
  .toggle-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1400;
    padding: 6px 12px;
    font-size: 16px;
  }
}


/* Hide buttons by default */
.desktop-only,
.mobile-only {
    display: none;
}

/* Show desktop button only on large screens */
@media (min-width: 992px) {
    .desktop-only {
        display: inline-block;
    }
}

/* Show mobile button only on small screens */
@media (max-width: 991px) {
    .mobile-only {
        display: inline-block;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1400;
        padding:7px 12px;
    }
}

/* Hide by default on desktop */
.sidebar-toggle {
    display: none;
}

/* Show on mobile only */
@media (max-width: 991px) {
    .sidebar-toggle {
        display: inline-block;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1300;
        background: #1c2954;
        color: #fff;
        border: none;
        padding: 6px 14px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 18px;
    }
}