/* --- Design tokens (from your HTML) --- */
:root{
  --primary-color:#2563eb; --primary-dark:#1d4ed8;
  --secondary-color:#64748b; --success-color:#10b981;
  --warning-color:#f59e0b; --danger-color:#ef4444;
  --background-color:#f8fafc; --card-background:#ffffff;
  --text-primary:#1e293b; --text-secondary:#64748b; --border-color:#e2e8f0;
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
}
*{box-sizing:border-box} html,body{height:100%}
/* Form bar layout */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.field label {
    font-size: .75rem;
    color: #4b5563
}

/* gray-600 */
body{font-family:'Poppins', system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
     background:var(--background-color); color:var(--text-primary); line-height:1.6}

/* --- Generic controls --- */
input, input[type="text"],input[type="email"],
input[type="password"],input[type="date"],input[type="number"],
input[type="tel"],select,textarea{
  width:100%; padding:.75rem .9rem; border:2px solid var(--border-color);
  border-radius:8px; font-size:.95rem; background:#fff; color:var(--text-primary);
}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--primary-color)}
label{display:block; margin:.25rem 0 .4rem; font-weight:500; color:var(--text-primary)}
small.text-muted{color:var(--text-secondary)}
textarea{resize:vertical}

/* --- Buttons --- */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.1rem;
     border-radius:8px; border:0; cursor:pointer; font-weight:500; text-decoration:none}
.btn-sm{padding:.4rem .8rem; font-size:.875rem}
.btn-primary{background:var(--primary-color); color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:var(--secondary-color); color:#fff}
.btn-success{background:var(--success-color); color:#fff}
.btn-warning{background:var(--warning-color); color:#fff}
.btn-danger{background:var(--danger-color); color:#fff}
.btn-outline{background:transparent; color:var(--primary-color); border:2px solid var(--primary-color)}
.btn-outline:hover{background:var(--primary-color); color:#fff}

/* --- Shell --- */
.header{background:var(--card-background); padding:1rem 2rem; box-shadow:var(--shadow);
        display:flex; justify-content:space-between; align-items:center; gap:1rem}
.header h1{color:var(--primary-color); font-size:1.15rem; margin:0}
.header-actions{display:flex; align-items:center; gap:.75rem}
.main-content{padding:1.25rem; max-width:1400px; margin:0 auto}

/* --- Tabs --- */
.tabs{display:flex; gap:.35rem; padding:.5rem; background:#fff; border-radius:12px;
      box-shadow:var(--shadow); margin:1rem 0 1.25rem}
.tab{padding:.6rem 1rem; border-radius:8px; background:transparent; border:0; cursor:pointer}
.tab.active{background:var(--primary-color); color:#fff}

/* --- Cards / grid --- */
.card{background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:1.25rem}
.grid{display:grid; gap:1rem}
.grid-cert{grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); margin-top: 20px;}
.meta{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; font-size:.9rem; color:var(--text-secondary)}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; border-radius:999px; font-size:.75rem; font-weight:600}
.badge.valid{background:rgba(16,185,129,.1); color:var(--success-color)}
.badge.expiring{background:rgba(245,158,11,.1); color:var(--warning-color)}
.badge.expired{background:rgba(239,68,68,.1); color:var(--danger-color)}

/* --- Modal --- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; place-items:center; padding:1rem; z-index:50}
.modal.active{display:grid}
.modal .content{background:#fff; border-radius:12px; width:min(900px,96vw); max-height:90vh; overflow:auto; padding:1.5rem; box-shadow:var(--shadow-lg)}
.modal .head{display:flex; justify-content:space-between; align-items:center; padding-bottom:1rem; border-bottom:2px solid var(--border-color)}
.modal .close{background:transparent; border:0; font-size:1.5rem; color:var(--text-secondary); cursor:pointer}

/* --- Utility --- */
.row{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.controls{background:#fff; border-radius:12px; padding:1rem; box-shadow:var(--shadow)}
.hr{height:1px; background:var(--border-color); margin:.75rem 0}
.hidden{display:none !important}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--danger-color);
}
/* Compact form sizing (use on any form) */
.form-compact input,
.form-compact select,
.form-compact textarea {
    padding: .45rem .6rem;
    /* smaller height */
    font-size: .875rem;
    /* smaller text */
    border-radius: 6px;
}

/* Responsive inline grid for filters */
.filters-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: center;
}

/* Keep action buttons tight */
.form-compact .btn {
    padding: .45rem .7rem;
    font-size: .85rem;
}

.form-compact .btn-sm {
    padding: .35rem .6rem;
    font-size: .8rem;
}

/* Optional: make the button stick to its intrinsic width */
.max-content {
    width: max-content;
}

/* ====== Table Card ====== */
.table-card {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(2, 6, 23, .06);
    overflow: hidden;
}

/* horizontal scroll on small screens */
.table-responsive {
    overflow-x: auto
}

/* ====== Table ====== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
    /* 14px */
    color: var(--text);
}

.table thead th {
    background: var(--bg-soft);
    color: #4b5563;
    /* gray-600 */
    text-align: left;
    font-weight: 600;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table tbody td {
    padding: .5rem .75rem;
    border-top: 1px solid #eee;
    vertical-align: middle;
}

/* zebra + hover */
.table tbody tr:nth-child(even) {
    background: #fcfcfd
}

.table tbody tr:hover {
    background: #f8fafc
}

/* alignment helpers (optional) */
.td-center {
    text-align: center
}

.td-right {
    text-align: right
}

.w-48 {
    width: 12rem
}

/* ====== Badges ====== */
.badge-role {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: #fff7d6;
    color: #7a5c00;
    border: 1px solid rgba(234, 179, 8, .4);
}

.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 .5rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.status-chip.is-active {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0
}

.status-chip.is-inactive {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca
}

/* ====== Action links/buttons ====== */
.actions {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--brand);
    font-size: .75rem;
    font-weight: 600;
}

.btn-link:hover {
    text-decoration: underline
}

.btn-danger-link {
    color: #dc2626
}

.btn-danger-link:hover {
    text-decoration: underline
}

/* ===== Users table (scoped) ===== */
.users-table {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
    border-radius: 6px;
    /* rounded-2xl */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    /* shadow-sm */
    overflow-x: auto;
}

/* Table base */
.users-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
    /* text-sm */
    line-height: 1.5rem;
    /* leading-6 */
}

/* Header */
.users-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    /* sticky top-0 z-10 */
    background: #0a1e4c;
    color: #fff;
    /* bg-[#0a1e4c] text-white */
    text-transform: uppercase;
    letter-spacing: .06em;
    /* tracking-wide */
    font-weight: 600;
    font-size: .75rem;
    /* text-xs font-semibold */
    padding: .75rem 1rem;
    /* px-4 py-3 */
}

/* Body rows */
.users-table tbody tr {
    border-top: 1px solid #9babca
}

/* divide-y divide-gray-200 */
.users-table tbody tr:nth-child(even) {
    background: rgba(249, 250, 251, .6)
}

/* even:bg-gray-50/60 */
.users-table tbody tr:hover {
    background: rgba(255, 247, 214, .4)
}

/* hover:bg-[#fff7d6]/40 */
.users-table tbody td {
    padding: .75rem 1rem;
    vertical-align: middle
}

.users-table .w-48 {
    width: 12rem
}

/* actions column */

/* Text colors used in cells */
.users-table .text-gray-900 {
    color: #111827
}

.users-table .text-gray-700 {
    color: #374151
}

.users-table .text-gray-500 {
    color: #6b7280
}

/* Inline action links (Send reset / Edit) */
.users-table [class*="text-[#0a1e4c]"] {
    color: #0a1e4c
}

.users-table [class*="text-[#0a1e4c]"]:hover {
    text-decoration: underline
}

/* Danger link */
.users-table .text-red-600 {
    color: #dc2626
}

.users-table .text-red-600:hover {
    text-decoration: underline
}

/* Role chips */
.users-table [class*="bg-[#fff7d6]"] {
    align-items: center;
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    background: #fff7d6;
    color: #7a5c00;
    border: 1px solid rgba(234, 179, 8, .4);
    /* ring-1 ring-[#eab308]/40 */
}

/* Status buttons */
.users-table button {
    cursor: pointer
}

/* active: bg-green-50 text-green-700 ring-1 ring-green-200 */
.users-table button[class*="bg-green-50"] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    height: 28px;
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* inactive: bg-red-50 text-red-700 ring-1 ring-red-200 */
.users-table button[class*="bg-red-50"] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 6px;
    height: 28px;
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* Utility shims for spacing/align (so your classes keep working) */
.users-table .text-center {
    text-align: center
}

.users-table .text-right {
    text-align: right
}

/* Smooth hover transition (transition-colors) */
.users-table tr {
    transition: background-color .15s ease
}

/* Stack actions vertically and align to the right */
.users-table .actions-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* right-align buttons */
    gap: .5rem;
}

/* Make link look like a button */
.users-table .actions-stack a.btn {
    text-decoration: none;
}

/* Compact button look used here */
.users-table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    /* consistent width; tweak if you like */
    height: 30px;
    padding: 0 .75rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: .75rem;
    /* text-xs */
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}

.users-table .btn:hover {
    filter: brightness(0.98)
}

/* Variants */
.users-table .btn-primary {
    background: #fff7d6;
    /* warm yellow */
    color: #0a1e4c;
    border-color: rgba(234, 179, 8, .5);
}

.users-table .btn-info {
    background: #e5efff;
    /* soft blue */
    color: #0a1e4c;
    border-color: #bfdbfe;
}

.users-table .btn-danger {
    background: #fef2f2;
    /* soft red */
    color: #b91c1c;
    border-color: #fecaca;
}