/* =====================================================================
 * Sustema Dynamics - Admin Panel Styles
 * File location: /admin/css/style.css
 * Version:     16.0 (Modern SaaS UI)
 * ===================================================================== */

/* 1. Variables & Reset */
:root{
    --navy:#0B2F5E;
    --green:#0d8a7a;
    --green-hover:#0a7062;
    --soft:#f8fafc;
    --grey:#e2e8f0;
    --ink:#1e293b;
    --muted:#64748b;
    --white:#ffffff;
    --danger:#ef4444;
    --danger-hover:#dc2626;
    --success:#10b981;
    --warning:#f59e0b;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body.admin-body{background-color:#f1f5f9;margin:0;padding:0;font-family:var(--font);color:var(--ink);line-height:1.6;display:block;-webkit-font-smoothing:antialiased;}
a{color:var(--green);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--green-hover);}
h1,h2,h3,h4,h5,h6{color:var(--ink);line-height:1.2;font-weight:700;margin-bottom:0.5rem;letter-spacing: -0.02em;}
p,li{color:var(--muted);font-size: 0.95rem;}
ul{list-style:none;}
img{max-width:100%;height:auto;display:block;}

/* Page Headers */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
.page-title { font-size: 2rem; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.03em; }
.page-subtitle { font-size: 0.95rem; color: #64748b; margin-top: 4px; font-weight: 500; }

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:8px;border:none;background:var(--green);color:#fff;font-weight:600;font-family:inherit;font-size:0.9rem;cursor:pointer;transition:all .2s ease;text-decoration:none;}
.btn:hover{background:var(--green-hover);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,138,122,.2);}
.btn-outline{background:#fff;border:1px solid var(--grey);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,0.02);}
.btn-outline:hover{background:var(--soft);border-color:#cbd5e1;}
.btn-danger{background:#fee2e2;color:var(--danger);}
.btn-danger:hover{background:var(--danger);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.2);}
.btn-icon { padding: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: none; cursor: pointer; transition: all 0.2s ease; }
.btn-icon.btn-outline { background: #fff; border: 1px solid #e2e8f0; color: #64748b; }
.btn-icon.btn-outline:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.btn-icon.btn-danger { background: #fef2f2; color: #ef4444; border: 1px solid #fee2e2; }
.btn-icon.btn-danger:hover { background: #ef4444; color: #fff; }
.btn-sm{padding:6px 12px;font-size:.8rem;border-radius:6px;}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:#334155;margin-bottom:8px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1px solid #cbd5e1;border-radius:8px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(13,138,122,.15);}
.form-full{grid-column:1/-1;}
.form-section{border:none;margin-bottom:24px;padding:0;}
.form-section legend{font-size:1.1rem;font-weight:700;color:#0f172a;margin-bottom:20px;display:block;width:100%;border-bottom:1px solid #e2e8f0;padding-bottom:12px;}

/* Admin Layout */
.admin-layout{display:flex;min-height:100vh;width:100%;max-width:100%;overflow-x:hidden;}

/* Sidebar */
.admin-sidebar{width:270px;background-color:#0f172a;color:#fff;flex-shrink:0;display:flex;flex-direction:column;min-height:100vh;z-index:1000;transition:transform 0.3s ease;}
.sidebar-header{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;gap:12px;}
.sidebar-header img{width:38px;height:38px;border-radius:50%;background:#fff;padding:2px;}
.sidebar-header h2{margin:0;font-size:1.15rem;color:#fff;font-weight:700;letter-spacing:0.5px;}
.admin-nav{flex:1;overflow-y:auto;padding:15px 12px;}
.admin-nav ul{list-style:none;padding:0;margin:0;}
.sd-nav-link{display:flex !important;align-items:center;justify-content:space-between;padding:12px 16px;color:#94a3b8 !important;text-decoration:none;border-radius:8px;font-size:0.9rem;font-weight:500;transition:all 0.2s ease;cursor:pointer;margin-bottom:4px;}
.sd-nav-link:hover,.sd-nav-link.active{background-color:rgba(255,255,255,0.08);color:#fff !important;}
.sd-nav-link span{display:flex;align-items:center;gap:12px;}
.sd-nav-link span i{width:18px;text-align:center;font-size:1rem;}
.sd-chevron{font-size:0.7rem;transition:transform 0.2s ease;color:#64748b;}
.sd-menu-group.open .sd-chevron{transform:rotate(90deg);}
.sd-dropdown{display:none;padding:4px 0 8px 0;}
.sd-menu-group.open .sd-dropdown{display:block;}
.sd-dropdown a{display:block;padding:10px 16px 10px 46px;color:#94a3b8 !important;font-size:0.85rem;font-weight:500;text-decoration:none;border-radius:6px;transition:color 0.2s;margin-bottom:2px;}
.sd-dropdown a:hover,.sd-dropdown a.active{color:#fff !important;background:rgba(255,255,255,0.05);}
.sidebar-overlay{display:none;}

/* Main & Topbar */
.admin-main{flex-grow:1;display:flex;flex-direction:column;min-width:0;background:#f8fafc;}
.admin-topbar{background:#fff;padding:15px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e2e8f0;z-index:10;}
.admin-topbar-left{display:flex;align-items:center;gap:15px;}
.mobile-only{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#0f172a;}
.admin-content{padding:35px 30px;flex-grow:1;max-width: 1400px; margin: 0 auto; width: 100%;}

/* User Dropdown */
.user-dropdown{position:relative;display:inline-block;}
.user-dropdown .avatar{width:38px;height:38px;border-radius:50%;background:var(--green);color:#ffffff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;cursor:pointer;text-transform:uppercase;user-select:none;}
.user-dropdown .dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);background:#ffffff;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,0.1);min-width:190px;padding:6px 0;z-index:200;border:1px solid #e2e8f0;}
.user-dropdown:hover .dropdown-menu,.user-dropdown .dropdown-menu.show{display:block;}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#334155;text-decoration:none;font-size:0.85rem;font-weight:500;transition:background 0.2s;}
.dropdown-menu a:hover{background:#f1f5f9;color:#0f172a;}
.dropdown-menu a i{width:16px;color:#64748b;text-align:center;}
.dropdown-menu hr{border:none;border-top:1px solid #e2e8f0;margin:6px 0;}

/* KPI Cards (Modern style) */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:30px;}
.kpi-card{background:#fff;padding:24px;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,0.02);position:relative;}
.kpi-title{font-size:0.8rem;color:#64748b;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}
.kpi-value{font-size:1.8rem;font-weight:800;color:#0f172a;margin-bottom:6px;line-height:1;letter-spacing:-0.02em;}
.kpi-value.text-danger { color: var(--danger); }
.kpi-sub{font-size:0.85rem;color:#94a3b8;font-weight:500;}

/* Summary Cards */
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:30px;}
.summary-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.02);padding:24px;border:1px solid #e2e8f0;}
.summary-card h2{font-size:1.15rem;margin-bottom:6px;color:#0f172a;}
.summary-card p.subtitle{font-size:0.85rem;color:#64748b;margin-bottom:20px;}
.summary-table{width:100%;border-collapse:collapse;}
.summary-table td{padding:14px 0;border-bottom:1px solid #f1f5f9;font-size:0.9rem;color:#334155;font-weight:500;}
.summary-table tr:last-child td{border-bottom:none;}
.summary-table td:last-child{text-align:right;font-weight:700;color:#0f172a;}
.summary-table tr.bold-row td{font-weight:700;color:#0f172a;font-size:1rem;border-top:1px solid #e2e8f0;border-bottom:none;padding-top:20px;}
.summary-note{font-size:0.8rem;color:#64748b;margin-top:20px;background:#f8fafc;padding:14px;border-radius:8px;line-height:1.6;border: 1px solid #e2e8f0;}

/* Quick Actions */
.quick-actions{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.02);padding:24px;border:1px solid #e2e8f0;}
.quick-actions h2{font-size:1.15rem;margin-bottom:6px;color:#0f172a;}
.action-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.action-btn{display:flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;font-weight:600;font-size:0.85rem;text-decoration:none;transition:all 0.2s ease;box-shadow:0 1px 2px rgba(0,0,0,0.02);}
.action-btn:hover{background:#f8fafc;border-color:#94a3b8;color:#0f172a;transform:translateY(-1px);}
.action-btn i{color:var(--green);font-size:0.95rem;}

/* Tables (Matches Vacancies Page) */
.card{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.02);border:1px solid #e2e8f0;overflow:hidden;margin-bottom:24px;}
.card-header{padding:20px 24px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;}
.card-header h2{margin:0;font-size:1.1rem;color:#0f172a;}
table{width:100%;border-collapse:collapse;font-size:.9rem;}
th,td{padding:16px 24px;text-align:left;border-bottom:1px solid #f1f5f9;vertical-align:middle;}
th{background:#f8fafc;color:#64748b;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e2e8f0;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#f8fafc;}
td strong { color: #0f172a; font-weight: 600; }
.num,th.num,td.num{text-align:right;}

/* Status Badges */
.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:capitalize;white-space:nowrap;}
.status-active,.status-paid,.status-won {background:#dcfce7;color:#166534;}
.status-draft,.status-pending,.status-inactive {background:#f1f5f9;color:#475569;}
.status-overdue,.status-rejected,.status-lost {background:#fee2e2;color:#991b1b;}

/* Modals & Alerts */
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.5);backdrop-filter: blur(2px);justify-content:center;align-items:center;z-index:2000;padding:20px;}
.modal-content{background:#ffffff;border-radius:16px;padding:32px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);position:relative;}
.modal-content h3{margin-bottom:24px;font-size:1.25rem;color:#0f172a;font-weight:700;}
.modal-buttons{display:flex;gap:12px;margin-top:32px;justify-content:flex-end;flex-wrap:wrap;}
.modal-buttons button,.modal-buttons a{padding:10px 24px;border-radius:8px;border:none;font-weight:600;cursor:pointer;font-size:0.9rem;font-family:inherit;transition:all 0.2s;}
.modal-buttons button[type="button"]{background:#f1f5f9;color:#475569;}
.modal-buttons button[type="button"]:hover{background:#e2e8f0;}
.modal-buttons button[type="submit"]{background:var(--green);color:#ffffff;}
.modal-buttons button[type="submit"]:hover{background:var(--green-hover);}
.admin-flash{padding:14px 20px;border-radius:8px;font-size:.9rem;margin-bottom:24px;font-weight:500;}
.admin-flash-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;}
.admin-flash-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}

/* Login Shell */
.login-shell {display: flex;align-items: center;justify-content: center;min-height: 100vh;background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);padding: 20px;}
.login-card {background: #fff;width: 100%;max-width: 440px;padding: 40px;border-radius: 16px;box-shadow: 0 20px 40px rgba(11, 47, 94, 0.08);border: none;}
.login-brand {text-align: center;margin-bottom: 30px;}
.login-brand img {width: 72px;height: 72px;border-radius: 50%;object-fit: cover;border: 3px solid #fff;box-shadow: 0 4px 12px rgba(11, 47, 94, 0.15);margin: 0 auto 16px;display: block;}
.login-brand h1 {font-size: 1.8rem;color: var(--navy);margin-bottom: 8px;font-weight: 700;}
.login-brand p {font-size: 0.9rem;color: var(--muted);margin-bottom: 0;}
.login-error {background: #fee2e2;color: #991b1b;padding: 12px 16px;border-radius: 8px;font-size: .85rem;margin-bottom: 20px;border-left: 3px solid var(--danger);font-weight: 500;}
.login-error-timeout {background: #fff3cd;color: #856404;border-color: #ffeeba;}
.login-card label {display: flex;align-items: center;gap: 8px;font-size: .85rem;font-weight: 600;color: var(--navy);margin-bottom: 6px;}
.login-card label i {color: var(--green);font-size: 0.9rem;}
.login-card input {width: 100%;padding: 12px 14px;border: 1px solid var(--grey);border-radius: 8px;font-family: inherit;font-size: .95rem;margin-bottom: 20px;transition: border-color 0.2s, box-shadow 0.2s;}
.login-card input:focus {outline: none;border-color: var(--green);box-shadow: 0 0 0 3px rgba(13, 138, 122, 0.15);}
.login-card .btn {width: 100%;padding: 14px;font-size: 1rem;margin-top: 10px;}
.login-card .btn i {margin-left: 8px;}
.login-links {margin-top: 28px;display: flex;justify-content: center;align-items: center;gap: 16px;font-size: .85rem;color: var(--muted);}
.login-links a {color: var(--muted);display: inline-flex;align-items: center;gap: 6px;}
.login-links a:hover {color: var(--green);}
.login-links .separator {color: #cbd5e1;}

/* Responsive */
@media (max-width: 1024px) {
    .grid-4, .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .admin-sidebar{position:fixed;top:0;left:0;height:100vh;z-index:1000;transform:translateX(-100%);}
    .admin-sidebar.mobile-open{transform:translateX(0);}
    .mobile-only{display:block;}
    .sidebar-overlay{display:none;}
    .sidebar-overlay.active{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);z-index:999;}
    .admin-content{padding:24px 16px;}
    .grid-2,.grid-3,.form-grid,.form-row{grid-template-columns:1fr;}
    .page-header { flex-direction: column; align-items: flex-start; }
}