/* =====================================================
   GLOBAL STYLES
   ===================================================== */

body {
   font-family: 'Playfair Display', serif;
    background: #f4f6f8;
    margin: 0;
    color: #2f3542;
}

a {
    color: #1f5fa1;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* =====================================================
   LAYOUT
   ===================================================== */

.layout {
    display: flex;
    min-height: 100vh;
}

.content {
    flex: 1;
    padding: 20px;
}


/* =====================================================
   SIDEBAR
   ===================================================== */

.sidebar {
    width: 220px;
    background: #1c2b39;
    color: #ecf0f1;
    padding: 20px;
}

.sidebar h2 {
    margin-top: 0;
    font-size: 18px;
    color: #d0e2ff;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin: 10px 0;
}

.sidebar a {
    color: #ecf0f1;
}


/* =====================================================
   TOP BAR
   ===================================================== */

.topbar {
    background: #ffffff;
    border-bottom: 1px solid #e0e6ed;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* =====================================================
   CARDS & TABLES
   ===================================================== */

.card {
    background: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 20px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 10px;
    border-bottom: 1px solid #e0e6ed;
    text-align: left;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
    display: inline-block;
    padding: 8px 12px;
    border: none;
    background: #1f5fa1;
    color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
}

.btn.secondary {
    background: #6c757d;
}

.btn.danger {
    background: #d9534f;
}


/* =====================================================
   FORMS
   ===================================================== */

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd3dc;
    border-radius: 3px;
}


/* =====================================================
   MESSAGES
   ===================================================== */

.message {
    margin-bottom: 10px;
    color: #d9534f;
}


/* =====================================================
   LOGIN PAGE (GIZMO GALAXY BRANDING)
   ===================================================== */

/* Apply ONLY to login page */
/* =========================
   LOGIN PAGE – REFINED
   ========================= */

/* ===========================
   LOGIN PAGE
   =========================== */

/* Background for login page only */
body.login-page {
    background-image: url('../indexbg.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Wrapper: places login card to the right */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 100vh;
    padding-right: 60px;
}

/* Login card — glass look */
.login-card {
    width: 320px;
    padding: 30px;

    /* 🔥 NO FIXED HEIGHT — allows expansion safely */
   
    height: auto;

    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Title */
.login-card h2,
.login-card h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
    color: #143d26;
}

/* Inputs */
.login-card input {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #cfe3d4;
    border-radius: 10px;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.login-card input:focus {
    outline: none;
    border-color: #2e8b57;
    box-shadow: 0 0 0 2px rgba(46, 139, 87, 0.2);
}

/* Button */
.login-card button {
    width: 100%;
    margin-top: 8px;
    padding: 12px;

    background: linear-gradient(135deg, #2e8b57, #3cb371);
    border: none;
    border-radius: 10px;

    color: #ffffff;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;
}

.login-card button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46, 139, 87, 0.35);
}

/* Error message (INSIDE the login card) */
body.login-page .message {
    background: rgba(255, 240, 240, 0.95);
    color: #8b0000;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 13px;

    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Optional — small hint text */
.login-card small {
    color: #4b5563;
    text-align: center;
}



/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {

    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        display: flex;
        gap: 15px;
    }

    /* Center login on mobile */
    body.login-page .login-wrapper {
        justify-content: center;
        padding-right: 0;
    }
}/* =====================================================
   SIDEBAR – GIZMO GALAXY STYLE
   ===================================================== */

.sidebar {
    width: 230px;
    background: linear-gradient(180deg, #0f3d2e, #0b2f23);
    color: #eaf5ee;
    padding: 24px 18px;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Sidebar title / brand */
.sidebar h2 {
  border-bottom:1px solid #e0e6ed; 
}

/* Menu list */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu items */
.sidebar li {
    margin-bottom: 6px;
}

/* Links */
.sidebar a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: #eaf5ee;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Hover effect */
.sidebar a:hover {
    background: rgba(159, 227, 191, 0.12);
    color: #ffffff;
    text-decoration: none;
}

/* Active menu item (if you add class="active") */
.sidebar a.active {
    background: linear-gradient(135deg, #2e8b57, #3cb371);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(46, 139, 87, 0.4);
}

/* Optional section divider */
.sidebar hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 15px 0;
}

body { outline: 4px solid lime !important; }
 
/* ===========================
   DASHBOARD - CLEAN STYLES
   =========================== */

/* Page title spacing */
.page-title {
    margin-bottom: 18px;
}

/* Grid layout for stat cards */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

/* Card look */
.card {
    background: #ffffff;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.04);
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Hover effect */
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

/* Card number */
.card h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
}

/* Card label */
.card p {
    margin-top: 6px;
    font-size: 14px;
    color: #6b7280;
}

/* Colored indicator bars */
.card.green  { border-top: 5px solid #22c55e; }
.card.blue   { border-top: 5px solid #2563eb; }
.card.orange { border-top: 5px solid #f97316; }
.card.purple { border-top: 5px solid #8b5cf6; }
.card.yellow { border-top: 5px solid #eab308; }
.card.teal  { border-top: 5px solid #14b8a6; }  /* emerald/teal */
.card.red   { border-top: 5px solid #ef4444; }  /* rose/red */
.card.dark  { border-top: 5px solid #334155; }  /* slate dark */
.card.cyan  { border-top: 5px solid #06b6d4; }  /* cyan */



/* ---- TABLE POLISH ---- */

.table thead th {
    background:#f8fafc;
    font-weight:600;
}

.table tbody tr:hover {
    background:#f3f4f6;
}

/* ---------- TOPBAR STYLES ---------- */

.topbar {
    background:#ffffff;
    border-bottom:1px solid #e0e6ed;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.topbar-left {
    font-size:15px;
    color:#2f3542;
}

.topbar-right {
    display:flex;
    align-items:center;
    gap:10px;
}

.fullscreen-btn {
    background:#22c55e;
    border:none;
    padding:7px 12px;
    border-radius:6px;
    color:#ffffff;
    cursor:pointer;
    font-size:13px;
}

.fullscreen-btn:hover {
    background:#16a34a;
}

/* ===========================
   TOP BAR (Header)
   =========================== */

.topbar{
    background:linear-gradient(180deg, #0f3d2e, #0b2f23);
    border-bottom:1px solid #e0e6ed;
    padding:12px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:100;
}

.topbar-left{
    font-size:15px;
    color:white;
}

.topbar-left strong{
    color:white;
}

.topbar-right{
    display:flex;
    gap:10px;
}
.topbar-center{
    font-size:18px;
    color:white;
    padding-left:18cm;
}


/* Fullscreen Button */
.fullscreen-btn{
    background:green;        /* Gizmo Galaxy green */
    border:none;
    padding:6px 12px;
    border-radius:6px;
    color:white;
    cursor:pointer;
    font-size:16px;
}

.fullscreen-btn:hover{
    background:#16a34a;
}

/* ============================
   POS FULL PAGE STYLE
   ============================ */

.pos-wrapper{
    padding:15px;
    width: 100%; 
}

.pos-title{
    margin-bottom:10px;
}

/* green theme */
:root{
    --green:#2e8b57;
    --light:#f5fff8;
}

/* grid layout */
.pos-grid{
    display:grid;
    grid-template-columns: 1.35fr 0.9fr;
    gap:20px;
}

.pos-items,.pos-summary{
    background:white;
    border-radius:12px;
    padding:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.pos-item-card{
    border:1px solid #e4e9ef;
    padding:12px;
    margin-bottom:10px;
    border-radius:10px;
    background:#f8fbf9;
}

.pos-remove{
    text-align:right;
    margin-bottom:6px;
}

.pos-field label{
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
    display:block;
}

.pos-field select,
.pos-field input,
.pos-field textarea{
    width:100%;
    padding:9px;
    border-radius:8px;
    border:1px solid #cfd6dd;
}

.pos-summary h2{
    margin-top:0;
    font-size:22px;
    color:#2e8b57;
}

/* Payment Buttons */
.pay-buttons{
    display:flex;
    gap:10px;
}

.pay-btn{
    flex:1;
    padding:10px;
    border-radius:10px;
    border:2px solid #2e8b57;
    background:white;
    cursor:pointer;
    font-weight:600;
}

.pay-btn.active{
    background:#2e8b57;
    color:white;
}

/* Submit button */
.pos-summary .submit{
    width:100%;
    background:linear-gradient(135deg,#2e8b57,#3cb371);
    color:white;
    font-size:16px;
}

/* IMEI logic controls */
.imei-field{ display:block; }
.qty-field{ display:block; }

/* ==================================
   MOBILE
   ================================== */
@media(max-width:900px){
    .pos-grid{
        grid-template-columns:1fr;
    }
}
/* ===== POS FULL WIDTH FIX ===== */
body.pos-page .content{
    max-width:none;
    width:100%;
    padding:15px 25px;
}

#loader-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.loader-box{
    background:#fff;
    padding:18px 28px;
    border-radius:10px;
    font-weight:600;
    display:flex;
    gap:10px;
    align-items:center;
}

.spinner{
    width:18px;
    height:18px;
    border:3px solid #2e8b57;
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.users-card{
    width: 100%;
}
.users-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.user-filters{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.user-filters input,
.user-filters select{
    padding:7px 10px;
    border:1px solid #cbd3dc;
    border-radius:6px;
}

/* Table hover + stripe */
.users-table tbody tr:nth-child(even){
    background:#f9fbfc;
}
.users-table tbody tr:hover{
    background:#eef5ff;
}

/* Grey small text */
.muted{
    color:#6c757d;
}

/* Role badges */
.role-chip{
    padding:4px 10px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    font-weight:600;
}
.role-chip.admin{
    background:#c0392b;
}
.role-chip.manager{
    background:#1f618d;
}
.role-chip.agent{
    background:#27ae60;
}

/* Status tags */
.status-badge{
    padding:4px 9px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
}
.status-badge.active{
    background:#e8f8ef;
    color:#1e7e34;
}
.status-badge.inactive{
    background:#fdecea;
    color:#b52b27;
}
.card.user-create-card{
    width: 100%;
}

.user-create-card h3{
    margin-top:0;
    color:#1f5fa1;
}

.form-block{
    border:1px solid #e3e7ec;
    padding:12px;
    border-radius:10px;
    margin-bottom:12px;
    background:#f9fbfc;
}

.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.form-actions{
    display:flex;
    gap:10px;
    margin-top:10px;
}
/* ---------- USER EDIT FORM STYLING ---------- */

.user-form {
    width: 100%;
    margin: 0 auto;
}

.user-form h2 {
    margin-bottom: 10px;
}

/* 2-column form layout (desktop only) */
.user-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.user-grid .full {
    grid-column: 1 / 3;
}

.user-form .form-group label {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.user-form .form-group input,
.user-form .form-group select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #cbd3dc;
}

/* Buttons row */
.user-form .actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

/* success + error */
.message.success {
    color: #155724;
    background:#d4edda;
    border:1px solid #c3e6cb;
    padding:8px;
    border-radius:6px;
}

/* Mobile fallback */
@media (max-width: 768px) {
    .user-grid {
        grid-template-columns: 1fr;
    }

    .user-grid .full {
        grid-column: 1 / 2;
    }
}

/* Sales Register Layout */
.sales-register{
    width: 100%;
}
.sales-register .card-header h2 {
    margin: 0 0 10px 0;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #f7faf8;
    border: 1px solid #e0e6e2;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.filter-item {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.filter-bar label {
    font-size: 12px;
    color: #445;
    margin-bottom: 2px;
}

.filter-actions {
    align-self: flex-end;
}

/* Table wrapper */
.table-wrapper {
    overflow-x: auto;
}

/* Pretty table */
.table.pretty th {
    background: #ecf5f0;
    color: #234;
    font-weight: bold;
}

.table.pretty tr:hover {
    background: #f5fbf7;
}

/* Badges */
.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

/* Sale Type Colors */
.badge.type-cash {
    background: #dbf7e4;
    color: #227a3b;
}

.badge.type-credit {
    background: #fff3d4;
    color: #9d6a00;
}

/* Status Colors */
.badge.status-approved {
    background: #d6f5ff;
    color: #0077a7;
}

.badge.status-pending {
    background: #fde8cc;
    color: #9d5a00;
}

.badge.status-rejected {
    background: #ffd6d6;
    color: #a10000;
}


/* Commission Page */
.commission-card{
    width: 100%;
}
.commission-card .card-header h2 {
    margin-top: 0;
}

/* summary pill bar */
.commission-summary {
    display: flex;
    gap: 30px;
    background: #f6faf7;
    border: 1px solid #e2ece6;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.tag {
    background: #eaf1ed;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.tag-green {
    background: #dff5e5;
    color: #1d6b37;
    font-weight: bold;
}

/* table look */
.table.pretty th {
    background: #ecf5f0;
}

.table.pretty tr:hover {
    background: #f5fbf7;
}

/* Re-use badges so UI stays consistent */
.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

/* green-ish for commission */
.badge.status-approved {
    background: #d6f5ff;
    color: #0077a7;
}

.badge.type-cash {
    background: #dbf7e4;
    color: #227a3b;
}

/* ================================
   STORES LIST
   ================================ */

.stores-card {
    background:#ffffff;
    width: 100%;
    border:1px solid #e0e6ed;
    border-radius:10px;
    padding:18px;
    margin-bottom:20px;
    box-shadow:0 4px 10px rgba(0,0,0,.05);
}

/* Header row */
.stores-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.stores-header h2 {
    margin:0;
}

/* Status badges */
.store-status {
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    border-radius:20px;
}

.store-status.active {
    background:#e6ffed;
    color:#1f7a3d;
}

.store-status.inactive {
    background:#ffecec;
    color:#a11f1f;
}

/* Assigned users pill */
.user-count-pill {
    background:#eef2ff;
    color:#1f3d8b;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

/* Right-aligned actions */
.table .actions {
    text-align:right;
    white-space:nowrap;
}

/* Hover highlight */
.table tr:hover {
    background:#f8fafc;
}


/* Mobile support */
@media(max-width:768px){
    .stores-header{
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }
}

/* ================================
   NICE FORM LAYOUT
   ================================ */

.nice-form {
    display:flex;
    flex-direction:column;
    gap:16px;
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.checkbox {
    display:flex;
    align-items:center;
    gap:8px;
}

.form-actions {
    margin-top:8px;
    display:flex;
    gap:10px;
}

/* smaller screens → stack */
@media(max-width:768px){
    .form-row{
        grid-template-columns:1fr;
    }
}

/* ========= Store View Styling ========= */

.store-info-bar{
    display:flex;
    gap:10px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.pill{
    padding:6px 12px;
    border-radius:20px;
    background:#eef2f5;
    font-size:13px;
}

.pill-green{ background:#e7f7ec; color:#237a44; }
.pill-red{ background:#fde8e8; color:#b91c1c; }

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:16px;
}

.split-values{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
}

.split-values .label{ color:#555; }
.split-values .value{ font-size:18px; font-weight:600; }

.compact td, .compact th{
    padding:8px 10px;
}

.trend-row{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    border-bottom:1px solid #eee;
}

.highlight-text{
    font-size:16px;
    line-height:1.6;
}

@media(max-width:768px){
    .grid-2{
        grid-template-columns:1fr;
    }
}

/* ========= Products========= */
.products-card {
    background: #ffffff;
    width: 100%;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 18px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.products-table td {
    vertical-align: middle;
}

/* IMEI / Qty Chip */
.role-chip.imei {
    background: #e6f5ff;
    color: #1161a8;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
}

.role-chip.qty {
    background: #ecf7ec;
    color: #1a7a32;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
}
.products-card {
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 15px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.product-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group label {
    font-weight: normal;
}

.form-actions {
    margin-top: 14px;
}

.products-card {
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 15px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.product-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group label {
    font-weight: normal;
}

.form-actions {
    margin-top: 14px;
}


.muted{
    color:#777;
    font-size:12px;
}
/* ===== STOCK — ADD PAGE ===== */

.users-cards {
    background:#fff;
    width: 100%;
    border-radius:14px;
    padding:18px 20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    margin-bottom:25px;
}

.users-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.users-header h2{
    margin:0;
}

.user-form {
    margin-top:10px;
}

/* Form Grid */
.form-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px;
}

/* Form group + labels */
.form-group{
    display:flex;
    flex-direction:column;
    margin-bottom:12px;
}

.form-group label{
    font-weight:600;
    margin-bottom:6px;
}

/* Inputs */
.form-group input,
.form-group select,
.form-group textarea{
    padding:10px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:14px;
    width:100%;
    outline:none;
}

.form-group textarea{
    resize:vertical;
}

/* Focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#2e8b57;
    box-shadow:0 0 0 2px rgba(46,139,87,0.2);
}

/* IMEI counter text */
.muted{
    color:#777;
    font-size:12px;
    margin-top:4px;
}

/* Actions */
.form-actions{
    margin-top:12px;
}

/* Buttons matching your theme */
.btn{
    padding:10px 16px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    text-decoration:none;
    font-weight:600;
}

.btn.secondary{
    background:#e9eef0;
    color:#333;
}

.btn:hover{
    opacity:.92;
}

/* Error message styling */
.message{
    background:#ffefef;
    color:#8b0000;
    padding:10px;
    border-radius:10px;
    margin-bottom:10px;
}

/* ===== AGED STOCK TABLE ===== */

.aged-table th{
    font-weight:600;
}

/* Qty pill */
.qty-pill{
    background:#e9eef0;
    padding:6px 12px;
    border-radius:20px;
    font-weight:600;
}

/* Age Badges */
.age-badge{
    padding:7px 14px;
    border-radius:20px;
    font-weight:700;
    color:#fff;
}

.age-badge.ok{
    background:#2e8b57;   /* green */
}

.age-badge.warn{
    background:#e6a100;   /* amber */
}

.age-badge.danger{
    background:#b22222;   /* red */
}

/* Card wrapper reused */
.users-card{
    background:#fff;
    border-radius:14px;
    padding:18px 20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    margin-bottom:25px;
}

.users-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

/* ===== STOCK DEDUCTION ===== */

.users-card{
    background:#fff;
    border-radius:14px;
    padding:18px 20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    margin-bottom:25px;
}

.users-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.user-form .form-row{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.user-form .form-group{
    flex:1;
}

.user-form input,
.user-form select,
.user-form textarea{
    width:100%;
}

.form-actions{
    margin-top:12px;
}

/* ===== STOCK LIST TABLE ===== */

.qty-pill{
    background:#e8f2ff;
    color:#1f5fa1;
    padding:5px 10px;
    border-radius:30px;
    font-weight:600;
}

.qty-pill.low{
    background:#ffe8e8;
    color:#b00000;
}

.role-chip.agent{
    background:#2ecc71;
}

.role-chip.manager{
    background:#3498db;
}
/* Stock transfer styling */

.hint{
    color:#6c757d;
    font-size:12px;
}

.users-card .form-row{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.users-card textarea{
    width:100%;
    border-radius:8px;
}

.users-card select,
.users-card input{
    border-radius:8px;
}

.imei-group{
    margin-top:10px;
}

/* ===== CREDIT APPROVALS LAYOUT ===== */

.users-card{
    width: 100%;
    background:#ffffff;
    border:1px solid #e0e6ed;
    border-radius:10px;
    padding:18px;
    box-shadow:0 5px 14px rgba(0,0,0,.05);
    margin-bottom:22px;
}

.users-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.users-header h2{
    margin:0;
}

/* ===== TABLE STYLING ===== */

.users-table{
    width:100%;
    border-collapse:collapse;
}

.users-table th{
    background:#f7f9fc;
    padding:12px;
    text-align:left;
    border-bottom:1px solid #e3e6ef;
    font-weight:600;
}

.users-table td{
    padding:10px 12px;
    border-bottom:1px solid #eff2f7;
}

/* zebra rows like other pages */
.users-table tbody tr:nth-child(even){
    background:#fafbfd;
}

/* ===== STATUS BADGE ===== */

.status-badge{
    border-radius:12px;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
}

.status-badge.pending{
    background:#fff3cd;
    color:#8a6d1a;
    border:1px solid #e7d9a8;
}

/* ===== BUTTONS ===== */

.btn{
    padding:7px 12px;
    border-radius:8px;
}

.btn.approve-btn{
    background:#2e8b57;
    color:#fff;
}

.btn.approve-btn:hover{
    opacity:.9;
}

.btn.danger{
    background:#d9534f;
    color:#fff;
}

/* ===== CUSTOMER INFO ROW ===== */

.customer-row{
    background:#f8fafb;
    font-size:13px;
    color:#444;
}

.customer-row td{
    padding-top:6px;
    padding-bottom:6px;
}