/* =============================================
   MigrateFlow - Stylesheet v4
   4 Standard Section Colors (used site-wide):
     Dark  #0d1117  Blue  #1565c0
     Green #2e7d32  Teal  #0d9488
   Sidebar: #0f172a (deep slate)
   ============================================= */

:root {
  --sidebar-bg:  #0f172a;
  --sidebar-w:   260px;
  --s-dark:      #0d1117;
  --s-blue:      #1565c0;
  --s-green:     #2e7d32;
  --s-teal:      #0d9488;
  --accent:      #e2b96f;
  --accent-h:    #f0d08a;
  --app-green:   #2e7d32;
  --app-blue:    #1565c0;
  --app-red:     #c62828;
  --app-amber:   #e65100;
  --app-purple:  #6a1b9a;
  --app-teal:    #0d9488;
  --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --shadow:      0 4px 20px rgba(0,0,0,.12);
  /* Legacy vars kept for compatibility */
  --navy:        #0d1117;
  --navy-mid:    #1a3a5c;
  --gold:        var(--s-teal);
  --text-muted:  #6c757d;
  --border:      #e9ecef;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; }
body { font-family: 'Inter','DM Sans',sans-serif; background:#f0f2f5; color:#212529; display:flex; min-height:100vh; }

/* ══ SECTION HEADER UTILITY (used on ALL forms) ══════ */
.sh { padding:12px 20px; color:#fff; font-weight:700; font-size:.88rem; display:flex; align-items:center; gap:8px; border-radius:8px 8px 0 0; }
.sh-dark  { background:var(--s-dark); }
.sh-blue  { background:var(--s-blue); }
.sh-green { background:var(--s-green); }
.sh-teal  { background:var(--s-teal); }

/* Section card wrapping form sections */
.sc { border-radius:10px; border:1px solid #e9ecef; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.sh { border-radius:8px 8px 0 0; } /* top radius on header, sc provides outer radius */
.sc-body { padding:20px; background:#fff; }

/* ══ SIDEBAR ════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w); background:var(--sidebar-bg);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100; overflow-y:auto;
}
.sidebar-logo {
  display:flex; align-items:center; gap:14px;
  padding:24px 18px 22px; border-bottom:1px solid rgba(255,255,255,.07);
  text-decoration:none;
}
.logo-icon {
  width:42px; height:42px; background:var(--s-teal); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:700; flex-shrink:0;
}
.logo-name {
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  font-weight:700;
  color:#fff;
  display:block;
  line-height:1.25;
  letter-spacing:.01em;
}
.logo-sub {
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-style:italic;
  font-weight:400;
  color:rgba(255,255,255,.7);
  letter-spacing:.04em;
  margin-top:3px;
  display:block;
}

.nav-section {
  font-size:.62rem; font-weight:700; color:rgba(255,255,255,.25);
  text-transform:uppercase; letter-spacing:.12em; padding:14px 18px 5px;
}
.sidebar-nav { padding:8px 10px; flex:1; display:flex; flex-direction:column; gap:2px; }

.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:7px; color:rgba(255,255,255,.85); text-decoration:none;
  font-size:.83rem; font-weight:400; transition:all .15s; position:relative;
}
.nav-item:hover {
  background: var(--s-teal);
  color: #fff !important;
  text-decoration: none;
}
.nav-item:hover .nav-icon { opacity:1; color:#fff !important; }
.nav-item.active {
  background:rgba(13,148,136,.28); color:#fff; font-weight:600;
}
.nav-item.active::before {
  content:''; position:absolute; left:0; top:18%; bottom:18%;
  width:3px; background:var(--s-teal); border-radius:0 3px 3px 0;
}
.nav-icon { width:18px; text-align:center; font-size:.95rem; opacity:.75; flex-shrink:0; }
.nav-item.active .nav-icon { opacity:1; color:var(--s-teal); }

/* Sidebar section labels also white */
.nav-section { color:rgba(255,255,255,.4); }

.sidebar-footer { padding:14px 12px; border-top:1px solid rgba(255,255,255,.07); }
.user-card { display:flex; align-items:center; gap:10px; padding:10px; background:rgba(255,255,255,.05); border-radius:9px; margin-bottom:8px; }
.user-avatar { width:34px; height:34px; background:var(--s-teal); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; }
.user-name  { font-size:.82rem; color:#fff; font-weight:500; }
.user-role  { font-size:.67rem; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.06em; }
.btn-logout { display:flex; align-items:center; justify-content:center; gap:6px; padding:7px; border-radius:8px; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5); text-decoration:none; font-size:.78rem; transition:all .15s; }
.btn-logout:hover { border-color:var(--s-teal); color:var(--s-teal); }

/* ══ MAIN CONTENT ═══════════════════════════════════ */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar { background:#fff; border-bottom:1px solid #e9ecef; padding:0 28px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; box-shadow:0 1px 0 #e9ecef; }
.page-title { font-weight:700; font-size:1.1rem; color:#0d1117; margin:0; }
.date-display { font-size:.78rem; color:#6c757d; }
.content-area { padding:24px 28px; flex:1; }

/* ══ STATS ══════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; border-radius:10px; padding:18px 20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:4px; border-top:3px solid #dee2e6; transition:transform .15s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-card.red    { border-top-color:var(--app-red); }
.stat-card.green  { border-top-color:var(--app-green); }
.stat-card.blue   { border-top-color:var(--app-blue); }
.stat-card.teal   { border-top-color:var(--s-teal); }
.stat-card.accent { border-top-color:var(--accent); }
.stat-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#6c757d; font-weight:600; }
.stat-value { font-size:2rem; font-weight:800; color:#0d1117; line-height:1; }
.stat-sub   { font-size:.75rem; color:#6c757d; }

/* ══ CLIENT TABS (pill style) ════════════════════════ */
.client-tabs { display:flex; gap:3px; background:#f1f3f5; padding:5px; border-radius:12px; margin-bottom:0; flex-wrap:wrap; border:1px solid #e9ecef; }
.client-tab { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; font-size:.8rem; font-weight:500; color:#6c757d; text-decoration:none; white-space:nowrap; transition:all .15s; border:none; background:none; cursor:pointer; font-family:inherit; }
.client-tab:hover { background:#fff; color:#212529; box-shadow:0 1px 3px rgba(0,0,0,.08); text-decoration:none; }
/* ALL active tabs use the same red color - consistent across manage & view */
.client-tab.active { background:#fff; color:var(--app-red) !important; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.tab-count { background:#e9ecef; color:#6c757d; font-size:.65rem; font-weight:700; padding:1px 6px; border-radius:10px; min-width:18px; text-align:center; }
.client-tab.active .tab-count { background:rgba(0,0,0,.08); color:inherit; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ══ CLIENT REF ═════════════════════════════════════ */
.client-ref { font-family:monospace; font-size:.78rem; background:#f8f9fa; border:1px solid #dee2e6; padding:3px 10px; border-radius:4px; color:#495057; font-weight:600; }

/* ══ RECORD CARDS (section-card-* with top border) ══ */
.section-card { border-radius:10px; overflow:hidden; border:1px solid #e9ecef; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.section-card-qual     { border-top:3px solid var(--s-green); }
.section-card-emp      { border-top:3px solid var(--s-blue); }
.section-card-eng      { border-top:3px solid var(--app-amber); }
.section-card-skills   { border-top:3px solid var(--app-red); }
.section-card-eoi      { border-top:3px solid var(--s-blue); }
.section-card-visa-h   { border-top:3px solid #475569; }
.section-card-visa-app { border-top:3px solid var(--s-teal); }
.section-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  gap: 8px;
  flex-wrap: nowrap;  /* NEVER wrap - keep left text + right buttons on same line */
}
.section-card-head-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 2px;
}
.section-card-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;      /* buttons never shrink or wrap */
  flex-wrap: nowrap;
}
.section-card-body { padding:14px 16px; background:#fff; }

/* ══ ADD FORM WRAP ══════════════════════════════════ */
.add-form-wrap { display:none; border-radius:10px; overflow:hidden; border:2px solid #e9ecef; margin-bottom:20px; }
.add-form-wrap.open { display:block; }
.add-form-hdr { padding:11px 18px; color:#fff; font-weight:700; font-size:.88rem; display:flex; align-items:center; gap:8px; }
.add-form-body { padding:20px; background:#fff; border-top:none; }
.edit-inline { display:none; padding:16px; background:#f8f9fa; border-top:1px solid #e9ecef; }
.edit-inline.open { display:block; }

/* ══ PROGRESS LOG TABLE ═════════════════════════════ */
.log-table thead th { background:#eef2f7 !important; color:#344563 !important; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:10px 12px; white-space:nowrap; font-weight:600; }
.log-table td { padding:11px 12px; vertical-align:top; font-size:.84rem; border-color:#f0f0f0; }
.log-action-cell { background:#fff8e1 !important; }

/* ══ DETAIL ROWS (view mode) ════════════════════════ */
.detail-row { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:.86rem; gap:12px; }
.detail-row:last-child { border-bottom:none; }
.detail-label { color:#6c757d; font-weight:500; min-width:150px; flex-shrink:0; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.detail-value { font-weight:500; color:#212529; }

/* ══ PIPELINE STEPPER ═══════════════════════════════ */
.pipeline-step { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.82rem; }
.step-dot { width:18px; height:18px; border-radius:50%; border:2px solid #dee2e6; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-size:9px; }
.step-dot.done    { background:var(--s-green); border-color:var(--s-green); color:#fff; }
.step-dot.current { background:var(--s-teal); border-color:var(--s-teal); color:#fff; }

/* ══ SHARE / PORTAL LINK ═════════════════════════════ */
.share-link-box { background:#f8f9fa; border:1px solid #dee2e6; border-radius:8px; padding:10px 14px; display:flex; align-items:center; gap:8px; }
.share-link-box input { flex:1; border:none; background:transparent; font-family:monospace; font-size:.78rem; color:#495057; }
.share-link-box input:focus { outline:none; }

/* ══ LOGIN PAGE ═════════════════════════════════════ */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--sidebar-bg); background-image:radial-gradient(ellipse at 30% 40%,rgba(13,148,136,.12) 0%,transparent 60%); }
.login-card { background:#fff; border-radius:16px; padding:44px 40px; width:100%; max-width:420px; box-shadow:0 32px 80px rgba(0,0,0,.4); }
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo .logo-icon-lg { width:52px; height:52px; background:var(--s-teal); border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin-bottom:12px; }
.login-logo .logo-name-lg { font-family:'Playfair Display',serif; font-size:1.7rem; color:#0d1117; display:block; font-weight:700; }
.login-logo .logo-sub { font-size:.72rem; color:#6c757d; letter-spacing:.1em; text-transform:uppercase; }

/* ══ CLIENT PORTAL ══════════════════════════════════ */
.portal-topnav { background:var(--sidebar-bg); height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:fixed; top:0; left:0; right:0; z-index:1000; }
.portal-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.portal-brand-icon { width:34px; height:34px; background:var(--s-teal); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:700; flex-shrink:0; }
.portal-brand-name { font-family:'Playfair Display',serif; font-size:1.05rem; color:#fff; }
.portal-brand-sub  { font-size:.6rem; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.08em; }
.portal-ref { background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); padding:4px 12px; border-radius:6px; font-family:monospace; font-size:.78rem; font-weight:600; }
.portal-username { color:rgba(255,255,255,.8); font-size:.85rem; font-weight:500; }
.portal-wrapper { display:flex; min-height:100vh; padding-top:60px; }
.portal-sidebar { width:220px; min-width:220px; background:#fff; border-right:1px solid #e9ecef; min-height:calc(100vh - 60px); padding:16px 10px; position:fixed; top:60px; left:0; bottom:0; overflow-y:auto; }
.portal-sidebar-label { font-size:.62rem; font-weight:700; color:#adb5bd; text-transform:uppercase; letter-spacing:.12em; padding:0 8px 6px; }
.portal-nav-link { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:#495057; text-decoration:none; font-size:.83rem; font-weight:500; margin-bottom:2px; transition:all .15s; }
.portal-nav-link:hover { background:#f0f2f5; color:#212529; text-decoration:none; }
.portal-nav-link.active { background:rgba(13,148,136,.12); color:var(--s-teal); font-weight:700; }
.portal-nav-link i { width:18px; text-align:center; }
.portal-content { flex:1; margin-left:220px; padding:24px 28px; min-height:calc(100vh - 60px); background:#f0f2f5; }
.portal-sidebar-footer { position:absolute; bottom:14px; left:10px; right:10px; padding:10px 12px; background:#f8f9fa; border-radius:8px; font-size:.73rem; color:#6c757d; line-height:1.5; }

/* ══ FORM LABEL ══════════════════════════════════════ */
.form-label { font-weight:600; font-size:.83rem; color:#212529; margin-bottom:4px; }

/* ══ LEGACY COMPATIBILITY ═══════════════════════════ */
/* For index.php, clients.php, logs.php, users.php */
.card { background:#fff; border-radius:10px; box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:20px; border:1px solid #e9ecef; }
.card-header { padding:14px 20px; border-bottom:1px solid #e9ecef; display:flex; align-items:center; justify-content:space-between; background:#fff; }
.card-title { font-weight:700; font-size:.95rem; color:#0d1117; margin:0; }
.card-body { padding:16px 20px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.86rem; }
th { background:#f8f9fa; padding:10px 14px; text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:#495057; font-weight:700; border-bottom:2px solid #e9ecef; white-space:nowrap; }
td { padding:12px 14px; border-bottom:1px solid #f0f2f5; vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#f8f9fa; }
.btn-gold      { background:var(--s-teal); color:#fff; border:none; }
.btn-gold:hover { background:#0c8275; color:#fff; }
.btn-outline   { background:transparent; border:1px solid #dee2e6; color:#495057; }
.btn-outline:hover { border-color:#0d9488; color:#0d9488; }
.flex-between  { display:flex; justify-content:space-between; align-items:center; }
.badge-info    { background:#cff4fc; color:#055160; }
.badge-warning { background:#fff3cd; color:#664d03; }
.badge-success { background:#d1e7dd; color:#0a3622; }
.badge-danger  { background:#f8d7da; color:#842029; }
.badge-primary { background:#cfe2ff; color:#084298; }
.badge-secondary { background:#e2e3e5; color:#41464b; }
.text-center   { text-align:center; }
.text-muted    { color:#6c757d !important; }
.avatar-initial {
  width:34px; height:34px;
  background:var(--s-teal); color:#fff;
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; flex-shrink:0;
}
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#e9ecef; }
.timeline-item { position:relative; margin-bottom:18px; }
.timeline-dot { position:absolute; left:-20px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--s-teal); border:2px solid #fff; box-shadow:0 0 0 2px var(--s-teal); }
.timeline-card { background:#fff; border-radius:8px; padding:14px 16px; box-shadow:var(--shadow-sm); border-left:3px solid var(--s-teal); }
.timeline-meta { font-size:.76rem; color:#6c757d; margin-bottom:5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.timeline-title { font-weight:600; color:#0d1117; margin-bottom:4px; }
.timeline-details { font-size:.84rem; color:#495057; line-height:1.6; }
.search-bar { display:flex; gap:10px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.search-bar input, .search-bar select { padding:8px 12px; border:1.5px solid #dee2e6; border-radius:8px; font-size:.86rem; background:#fff; }
.search-bar input:focus, .search-bar select:focus { outline:none; border-color:var(--s-teal); }
.search-bar input { min-width:220px; }

/* ══ COLORFUL BUTTON PALETTE ═════════════════════════ */
.btn-col-red    { background:#e94560!important; color:#fff!important; border:none; }
.btn-col-blue   { background:var(--s-blue)!important; color:#fff!important; border:none; }
.btn-col-green  { background:var(--s-green)!important; color:#fff!important; border:none; }
.btn-col-teal   { background:var(--s-teal)!important; color:#fff!important; border:none; }
.btn-col-amber  { background:var(--app-amber)!important; color:#fff!important; border:none; }
.btn-col-purple { background:#7c3aed!important; color:#fff!important; border:none; }
.btn-col-slate  { background:#475569!important; color:#fff!important; border:none; }
.btn-col-dark   { background:var(--s-dark)!important; color:#fff!important; border:none; }
.btn-col-red:hover    { background:#c73652!important; }
.btn-col-blue:hover   { background:#1044a0!important; }
.btn-col-green:hover  { background:#1b5e20!important; }
.btn-col-teal:hover   { background:#0b7a70!important; }
.btn-col-amber:hover  { background:#bf4500!important; }
.btn-col-purple:hover { background:#6d28d9!important; }
.btn-col-slate:hover  { background:#334155!important; }
.btn-col-dark:hover   { background:#111827!important; }

/* ══ PARTNER FORM GRID (client_manage.php) ══════════ */
.pf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.pf-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px;}
.pf-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:12px;}
.pf-grid-5{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:12px;margin-bottom:12px;}
.pf-lbl{display:block;font-size:.83rem;font-weight:600;margin-bottom:4px;}
.pf-box{border:1px solid #dee2e6;border-radius:8px;padding:16px;margin-bottom:14px;background:#f8f9fa;}
.pf-title{color:#0d9488;border-bottom:2px solid #0d9488;padding-bottom:6px;margin-bottom:14px;font-size:.95rem;font-weight:700;display:block;}

/* ══ RECORD TABLES ══════════════════════════════════ */
.rec-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.rec-table thead th {
  padding:10px 12px; color:#344563 !important; font-size:.73rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  background: #eef2f7 !important;
}
.rec-table td { padding:9px 12px; vertical-align:middle; border-bottom:1px solid #f0f2f5; }
.rec-table tbody tr:nth-child(odd) td   { background:#fff; }
.rec-table tbody tr:nth-child(even) td  { background:#f8f9fa; }
.rec-table tbody tr:not(.edit-tr):hover td { background:#e9f0ff; cursor:default; }
.rec-table tbody tr:last-child td { border-bottom:none; }
.rec-table .edit-tr td { background:#eef4ff !important; padding:0 !important; }
.rec-table .edit-form-row { padding:16px 14px; }

/* ══ HAMBURGER BUTTON ════════════════════════════════ */
.topbar-hamburger {
  display:none; background:none; border:1px solid #dee2e6; border-radius:6px;
  padding:5px 9px; font-size:1.15rem; color:#0d1117; cursor:pointer;
  align-items:center; justify-content:center; line-height:1;
}
.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:99; backdrop-filter:blur(2px);
}
.sidebar-overlay.open { display:block; }

/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width:900px) {
  .sidebar {
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:100; width:var(--sidebar-w);
  }
  .sidebar.mobile-open {
    transform:translateX(0);
    box-shadow:4px 0 24px rgba(0,0,0,.35);
  }
  .main-content { margin-left:0 !important; }
  .topbar-hamburger { display:flex; }
  .content-area { padding:14px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .client-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
  .client-tab  { flex-shrink:0; }
}