/* =====================================================================
 *  GOLWEL SECURITY SERVICES  -  Admin Panel Stylesheet
 * =================================================================== */

:root {
    --green-900: #002a00;
    --green:     #003f00;
    --green-600: #0a5a0a;
    --green-050: #eef3ee;
    --gold-700:  #b87d18;
    --gold:      #eca434;
    --gold-050:  #fdf6e9;
    --ink:       #1a1f1a;
    --slate:     #4a544a;
    --muted:     #7a847a;
    --line:      #e2e6e2;
    --paper:     #ffffff;
    --cloud:     #f4f6f4;
    --success:   #1e7e34;
    --danger:    #c0392b;
    --warning:   #d68910;
    --info:      #2471a3;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Manrope', 'Segoe UI', Arial, sans-serif;
    --radius-sm: 6px;
    --radius:    10px;
    --shadow-sm: 0 2px 8px rgba(0,42,0,.06);
    --shadow:    0 8px 28px rgba(0,42,0,.12);
    --sidebar-w: 256px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.admin {
    font-family: var(--font-body);
    background: var(--cloud);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
}
a { color: var(--green-600); text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ----------  AUTH SCREENS  ----------------------------------------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--green-900), var(--green) 70%);
}
.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}
.auth-head {
    background: var(--green);
    padding: 32px 36px 26px;
    text-align: center;
}
.auth-head .a-logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}
.auth-head .a-logo span { color: var(--gold); }
.auth-head .a-sub {
    color: rgba(255,255,255,.7);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 4px;
}
.auth-body { padding: 32px 36px 36px; }
.auth-body h1 { font-family: var(--font-display); font-size: 1.4rem;
                color: var(--green); margin-bottom: 4px; }
.auth-body .a-lead { color: var(--muted); font-size: .9rem; margin-bottom: 22px; }

/* ----------  LAYOUT SHELL  ----------------------------------------- */
.admin-shell { display: flex; min-height: 100vh; }

/* sidebar */
.admin-sidebar {
    width: var(--sidebar-w);
    background: var(--green-900);
    color: rgba(255,255,255,.75);
    position: fixed;
    top: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform .25s ease;
}
.sidebar-brand {
    padding: 22px 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .sb-logo {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
.sidebar-brand .sb-logo span { color: var(--gold); }
.sidebar-brand .sb-tag {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.4);
}
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
}
.sidebar-nav .nav-section {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.35);
    padding: 16px 12px 7px;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.72);
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 2px;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav a.active {
    background: var(--green);
    color: #fff;
}
.sidebar-nav a.active i { color: var(--gold); }
.sidebar-nav a i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar-nav a .nav-badge {
    margin-left: auto;
    background: var(--gold);
    color: var(--green-900);
    font-size: .7rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
}

/* main column */
.admin-main {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* topbar */
.admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0 26px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}
.admin-topbar .tb-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--green);
    font-weight: 600;
}
.admin-topbar .tb-right { display: flex; align-items: center; gap: 16px; }
.tb-link { color: var(--slate); font-size: .88rem; display: flex;
           align-items: center; gap: 6px; }
.tb-link:hover { color: var(--green); }
.tb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
}
.tb-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--green);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
}
.tb-user .tb-name { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.tb-user .tb-role { font-size: .74rem; color: var(--muted);
                    text-transform: capitalize; }

.sidebar-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 1.5rem;
    color: var(--green);
    cursor: pointer;
}

/* content area */
.admin-content { padding: 26px; flex: 1; }

/* ----------  PAGE HEADER  ------------------------------------------ */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}
.page-head h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--green);
}
.page-head .ph-sub { color: var(--muted); font-size: .88rem; }

/* ----------  CARDS  ------------------------------------------------ */
.box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.box-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box-head h3 { font-size: 1.05rem; color: var(--green);
               font-family: var(--font-display); }
.box-body { padding: 20px; }
.box + .box { margin-top: 20px; }

/* ----------  STAT CARDS  ------------------------------------------- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}
.stat-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
}
.stat-box .sb-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.sb-icon.green { background: var(--green-050); color: var(--green); }
.sb-icon.gold  { background: var(--gold-050); color: var(--gold-700); }
.sb-icon.blue  { background: #e9f2f8; color: var(--info); }
.sb-icon.red   { background: #fbeceb; color: var(--danger); }
.stat-box .sb-num {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}
.stat-box .sb-label { font-size: .82rem; color: var(--muted); }

/* ----------  PIPELINE  --------------------------------------------- */
.pipeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.pipe-stage {
    text-align: center;
    padding: 16px 8px;
    border-radius: var(--radius-sm);
    background: var(--cloud);
    border: 1px solid var(--line);
}
.pipe-stage .ps-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--green);
}
.pipe-stage .ps-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

/* ----------  TABLES  ----------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table thead th {
    background: var(--green-050);
    color: var(--green);
    text-align: left;
    padding: 12px 14px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid var(--line);
}
.admin-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--slate);
}
.admin-table tbody tr:hover { background: var(--cloud); }
.admin-table .row-actions { display: flex; gap: 6px; }

/* ----------  BADGES  ----------------------------------------------- */
.badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: capitalize;
    color: #fff;
}
.bg-secondary { background: #6c757d; }
.bg-info { background: var(--info); }
.bg-primary { background: var(--green); }
.bg-success { background: var(--success); }
.bg-danger { background: var(--danger); }
.bg-warning { background: var(--warning); }
.bg-dark { background: #343a40; }
.text-dark { color: #1a1f1a !important; }

/* ----------  BUTTONS  ---------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .88rem;
    padding: 10px 18px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-600); color: #fff; }
.btn-gold { background: var(--gold); color: var(--green-900); }
.btn-gold:hover { background: var(--gold-700); color: #fff; }
.btn-outline { background: #fff; border-color: var(--line); color: var(--slate); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .88; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .8rem; }
.btn-icon { padding: 7px 9px; }
.btn-block { width: 100%; justify-content: center; }

/* ----------  FORMS  ------------------------------------------------ */
.field { margin-bottom: 18px; }
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.field label {
    display: block;
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 6px;
}
.field label .req { color: var(--danger); }
.input, .select, textarea.input {
    width: 100%;
    font-family: var(--font-body);
    font-size: .92rem;
    padding: 10px 13px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, textarea.input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,63,0,.1);
}
textarea.input { min-height: 120px; resize: vertical; }
.input.is-invalid { border-color: var(--danger); }
.field-hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.field-error { font-size: .8rem; color: var(--danger); margin-top: 4px; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23003f00' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 38px;
}

.check-inline { display: flex; align-items: center; gap: 8px; }
.check-inline input { width: 17px; height: 17px; accent-color: var(--green); }

/* file upload */
.upload-zone {
    border: 2px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    cursor: pointer;
}
.upload-zone:hover { border-color: var(--gold); background: var(--gold-050); }
.upload-zone input[type=file] { display: none; }
.upload-zone i { font-size: 1.6rem; color: var(--green-600); }
.current-img {
    max-width: 140px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    margin-top: 8px;
}

/* ----------  ALERTS  ----------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    margin-bottom: 18px;
    border-left: 4px solid;
}
.alert i { margin-top: 2px; }
.alert-success { background: #eaf6ec; border-color: var(--success); color: #1c5c2a; }
.alert-danger  { background: #fbeceb; border-color: var(--danger);  color: #8c2820; }
.alert-warning { background: #fdf3e3; border-color: var(--warning); color: #8a5a14; }
.alert-info    { background: #e9f2f8; border-color: var(--info);    color: #1d5478; }

/* ----------  EMPTY STATE  ------------------------------------------ */
.empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
}
.empty i { font-size: 2.6rem; color: var(--line); margin-bottom: 10px; }

/* ----------  PAGINATION  ------------------------------------------- */
.pagination { display: flex; gap: 5px; margin-top: 18px; flex-wrap: wrap; }
.pagination a, .pagination strong {
    display: flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    font-weight: 700; font-size: .85rem; color: var(--slate);
}
.pagination a:hover { border-color: var(--green); color: var(--green); }
.pagination strong { background: var(--green); border-color: var(--green); color: #fff; }

/* ----------  FILTER BAR  ------------------------------------------- */
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.filter-bar .input, .filter-bar .select { width: auto; min-width: 180px; }

/* ----------  DETAIL GRID  ------------------------------------------ */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}
.detail-item {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.detail-item .di-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}
.detail-item .di-value { font-weight: 600; color: var(--ink); }

/* ----------  TIMELINE (RFQ history)  ------------------------------- */
.history-list { position: relative; padding-left: 26px; }
.history-list::before {
    content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
    width: 2px; background: var(--line);
}
.history-item { position: relative; padding-bottom: 18px; }
.history-item:last-child { padding-bottom: 0; }
.history-item::before {
    content: ""; position: absolute; left: -23px; top: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--gold);
}
.history-item .hi-status { font-weight: 700; color: var(--green); }
.history-item .hi-meta { font-size: .78rem; color: var(--muted); }
.history-item .hi-note { font-size: .88rem; color: var(--slate); margin-top: 2px; }

/* ----------  UTILITIES  -------------------------------------------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.text-muted{color:var(--muted)}.text-center{text-align:center}
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-1{gap:.5rem}.gap-2{gap:1rem}
.thumb-sm{width:46px;height:46px;border-radius:6px;object-fit:cover;border:1px solid var(--line)}

/* ----------  RESPONSIVE  ------------------------------------------- */
@media (max-width: 1100px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .pipeline { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; }
    .sidebar-toggle { display: block; }
    .field-row, .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .stat-row { grid-template-columns: 1fr; }
    .pipeline { grid-template-columns: repeat(2, 1fr); }
    .admin-content { padding: 16px; }
}

/* End of admin.css */