/* =========================================================
   CAREER BRIDGE - RESPONSIVE OVERRIDES
   Responsive-only rules. Desktop UI, HTML structure and JS
   functionality are intentionally unchanged.
========================================================= */

/* Prevent accidental horizontal overflow on every page. */
@media (max-width: 1200px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .app-main,
  .app-content,
  .container,
  .register-container,
  .ats-page,
  .profile-page,
  .activities-page,
  .readiness-page {
    min-width: 0;
    max-width: 100%;
  }

  .table-wrap,
  .student-table-card {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   LAPTOP / SMALL DESKTOP
========================================================= */
@media (max-width: 1100px) {
  .container {
    width: min(100% - 40px, 1180px);
  }

  .app-content {
    padding: 24px;
  }

  .student-kpi-grid,
  .officer-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-dashboard-layout,
  .profile-layout,
  .profile-layout-new,
  .roadmap-layout,
  .ats-workspace,
  .ats-layout,
  .readiness-main,
  .dashboard-summary-grid,
  .announcement-layout {
    grid-template-columns: 1fr;
  }

  .profile-tip-card,
  .profile-photo-card,
  .roadmap-layout > aside {
    position: static !important;
    top: auto !important;
  }

  .student-filter-panel {
    grid-template-columns: 1fr 1fr;
  }

  .student-filter-panel > *:first-child {
    grid-column: 1 / -1;
  }

  .result-main-grid {
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  }

  .landing-nav,
  .hero-inner,
  .section-inner,
  .footer-inner {
    width: min(100% - 40px, 1180px);
  }

  .hero-inner,
  .office-layout {
    gap: 36px;
  }
}

/* =========================================================
   TABLET / SIDEBAR DRAWER
========================================================= */
@media (max-width: 1000px) {
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -270px !important;
    width: 252px !important;
    height: 100dvh !important;
    z-index: 50 !important;
    transition: left .25s ease !important;
    overflow-y: auto !important;
  }

  .sidebar.open {
    left: 0 !important;
  }

  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 40;
  }

  .mobile-overlay.open {
    display: block;
  }

  .hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .app-topbar {
    padding: 0 18px !important;
  }

  .app-content {
    padding: 22px 20px !important;
  }

  .page-hero,
  .dashboard-welcome,
  .officer-welcome,
  .profile-page-header,
  .readiness-header,
  .activities-header,
  .ats-header,
  .roadmap-page-hero {
    gap: 18px;
  }

  .targeting-grid,
  .form-row,
  .profile-form-grid,
  .form-grid {
    gap: 14px;
  }

  .management-toolbar {
    grid-template-columns: minmax(0, 1fr) 190px;
  }

  .notification-popover {
    max-width: calc(100vw - 34px);
  }

  /* Registration keeps left panel visible on tablet while form scrolls. */
  .register-shell {
    grid-template-columns: minmax(300px, 36%) minmax(0, 64%) !important;
  }

  .register-visual {
    padding: 42px 32px !important;
  }

  .register-form-side {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* =========================================================
   TABLET PORTRAIT / LARGE MOBILE
========================================================= */
@media (max-width: 850px) {
  body {
    overflow-x: hidden;
  }

  .container,
  .landing-nav,
  .hero-inner,
  .section-inner,
  .footer-inner {
    width: min(100% - 30px, 1180px) !important;
  }

  .page-hero,
  .dashboard-welcome,
  .officer-welcome,
  .profile-page-header,
  .readiness-header,
  .activities-header,
  .ats-header,
  .roadmap-page-hero {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .course-badge,
  .ats-mini-stat,
  .latest-score-card,
  .activity-progress-box {
    width: 100% !important;
    min-width: 0 !important;
  }

  .officer-dashboard-grid,
  .ats-analysis-grid,
  .result-details-grid,
  .targeting-grid,
  .management-toolbar,
  .student-filter-panel,
  .readiness-info-grid,
  .snapshot-grid,
  .feature-grid,
  .career-grid {
    grid-template-columns: 1fr !important;
  }

  .student-filter-panel > *:first-child {
    grid-column: auto;
  }

  .result-main-grid {
    grid-template-columns: 1fr !important;
  }

  .score-card {
    min-height: 260px !important;
  }

  .career-focus-card,
  .roadmap-hero,
  .ats-result-head,
  .job-card-top,
  .sticky-save {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .career-focus-card .btn,
  .sticky-save .btn,
  .sticky-save button {
    width: 100%;
  }

  .manage-job-card {
    grid-template-columns: 1fr !important;
  }

  .job-company-mark {
    margin-bottom: 2px;
  }

  .job-actions {
    flex-wrap: wrap;
  }

  .roadmap-option {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .dashboard-focus-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Auth and registration become single-column on phones/tablets. */
  .auth-shell {
    grid-template-columns: 1fr !important;
  }

  .auth-visual {
    display: none !important;
  }

  .auth-form-side {
    min-height: 100dvh;
    padding: 28px 20px !important;
  }

  .auth-card {
    width: min(100%, 620px) !important;
  }

  .register-shell {
    height: auto !important;
    min-height: 100dvh !important;
    display: block !important;
    overflow: visible !important;
  }

  .register-visual {
    display: none !important;
  }

  .register-form-side {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding: 30px 22px 50px !important;
  }

  .mobile-brand {
    display: inline-flex !important;
  }

  /* Landing page stacks without changing desktop layout. */
  .landing-header {
    height: auto !important;
    min-height: 68px;
    padding: 10px 0;
  }

  .landing-nav {
    gap: 14px !important;
  }

  .landing-links {
    gap: 14px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero-inner,
  .office-layout {
    grid-template-columns: 1fr !important;
  }

  .landing-hero {
    min-height: auto !important;
    padding: 56px 0 !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 720px) {
  .app-topbar {
    height: 64px !important;
    padding: 0 14px !important;
  }

  .app-content {
    padding: 18px 14px !important;
  }

  .student-kpi-grid,
  .officer-kpi-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .form-row,
  .profile-form-grid,
  .form-grid,
  .officer-dashboard-grid,
  .ats-analysis-grid,
  .targeting-grid,
  .management-toolbar,
  .student-filter-panel,
  .result-details-grid,
  .dashboard-focus-meta {
    grid-template-columns: 1fr !important;
  }

  .form-group.full,
  .profile-field.full {
    grid-column: auto !important;
  }

  .student-kpi,
  .officer-kpi,
  .card,
  .panel,
  .form-section,
  .ats-card,
  .profile-section,
  .result-detail-card,
  .breakdown-card,
  .recent-panel,
  .dashboard-focus-card,
  .dashboard-actions-card {
    min-width: 0;
  }

  .topbar-user > span {
    display: none !important;
  }

  .notification-popover {
    position: fixed !important;
    top: 70px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - 90px);
  }

  .job-card-top,
  .career-focus-card,
  .roadmap-hero,
  .ats-result-head {
    align-items: stretch !important;
  }

  .job-actions {
    width: 100%;
  }

  .job-actions .btn,
  .job-actions button {
    flex: 1 1 auto;
  }

  .job-meta-row {
    gap: 9px 14px;
  }

  .career-step {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .step-marker {
    width: 32px !important;
    height: 32px !important;
  }

  .roadmap-hero,
  .career-focus-card,
  .ats-result-head {
    padding: 20px !important;
  }

  .roadmap-progress-ring,
  .ats-gauge {
    align-self: center;
  }

  .table {
    min-width: 700px;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }

  .sticky-save {
    position: static !important;
    margin-top: 16px;
  }

  .multi-select-menu {
    position: static !important;
    margin-top: 6px;
    max-height: 240px;
    box-shadow: none;
  }

  .page-hero h1,
  .dashboard-welcome h1,
  .officer-welcome h1,
  .register-header h2,
  .profile-page-header h1,
  .ats-heading h1 {
    overflow-wrap: anywhere;
  }

  .auth-links {
    flex-wrap: wrap;
  }

  .landing-links {
    display: flex !important;
    max-width: 62vw;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }

  .landing-links::-webkit-scrollbar {
    display: none;
  }

  .landing-links > a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .landing-brand {
    font-size: 15px !important;
  }

  .landing-logo {
    width: 40px !important;
    height: 40px !important;
  }

  .hero-copy h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  .hero-copy > p {
    font-size: 15px !important;
  }

  .hero-buttons {
    align-items: stretch !important;
  }

  .hero-buttons a,
  .hero-buttons .btn,
  .hero-btn {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 560px) {
  .app-content {
    padding: 15px 11px !important;
  }

  .app-topbar {
    padding: 0 10px !important;
  }

  .topbar-left {
    min-width: 0;
  }

  .topbar-left > div {
    min-width: 0;
  }

  .topbar-left b,
  [data-page-title] {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-dot {
    width: 35px !important;
    height: 35px !important;
  }

  .student-kpi,
  .officer-kpi {
    padding: 14px !important;
  }

  .student-kpi strong,
  .officer-kpi strong {
    font-size: 22px !important;
  }

  .card,
  .panel,
  .form-section,
  .ats-card,
  .profile-section,
  .result-detail-card,
  .breakdown-card,
  .recent-panel,
  .dashboard-focus-card,
  .dashboard-actions-card {
    padding: 16px !important;
    border-radius: 13px !important;
  }

  .btn {
    min-height: 42px;
  }

  .input,
  .select,
  .textarea,
  .form-control,
  .profile-field input,
  .profile-field select,
  .profile-field textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  .page-hero {
    padding: 10px 0 20px !important;
  }

  h1 {
    font-size: clamp(27px, 8vw, 34px);
  }

  h2 {
    font-size: 23px;
  }

  h3 {
    overflow-wrap: anywhere;
  }

  .notification-bell {
    width: 44px !important;
    height: 44px !important;
  }

  .score-circle {
    width: 125px !important;
    height: 125px !important;
  }

  .score-card {
    min-height: 235px !important;
  }

  .profile-image-wrapper,
  #profileImagePreview,
  .profile-image-placeholder {
    width: 110px !important;
    height: 110px !important;
  }

  .activities-header,
  .readiness-header {
    margin-bottom: 16px !important;
  }

  .activity-intro,
  .readiness-message,
  .ats-note,
  .role-help,
  .role-info {
    overflow-wrap: anywhere;
  }

  .roadmap-option {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  .roadmap-option > :last-child {
    grid-column: 2;
  }

  .manage-job-card {
    padding: 14px !important;
  }

  .table {
    min-width: 640px;
  }

  .register-form-side {
    padding: 22px 12px 45px !important;
  }

  .register-card {
    padding: 15px !important;
  }

  .register-card .form-section {
    padding: 18px 14px !important;
  }

  .register-header h2 {
    font-size: 28px !important;
  }

  .register-header p {
    font-size: 13px !important;
  }

  .section-heading {
    align-items: flex-start !important;
  }

  .section-heading h3 {
    font-size: 16px !important;
  }

  .landing-nav,
  .hero-inner,
  .section-inner,
  .footer-inner {
    width: min(100% - 24px, 1180px) !important;
  }

  .landing-hero {
    padding: 42px 0 !important;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
  .app-content {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .topbar-left small {
    display: none;
  }

  .topbar-left b,
  [data-page-title] {
    max-width: 150px;
  }

  .hamburger {
    padding: 7px 9px !important;
  }

  .student-kpi,
  .officer-kpi {
    gap: 10px !important;
  }

  .kpi-icon,
  .officer-kpi > span {
    width: 34px !important;
    height: 34px !important;
  }

  .notification-popover {
    left: 8px !important;
    right: 8px !important;
  }

  .job-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .job-actions .icon-danger {
    width: 100% !important;
  }

  .table {
    min-width: 600px;
  }
}

/* =========================================================
   SHORT VIEWPORTS / LANDSCAPE PHONES
========================================================= */
@media (max-height: 600px) and (max-width: 1000px) {
  .sidebar {
    overflow-y: auto !important;
  }

  .notification-popover {
    max-height: calc(100dvh - 75px);
    overflow-y: auto;
  }
}