/* ===== Shared App Custom Styles ===== */
/* Flat colors, compact layout - no gradients */

/* ---------- Wizard Progress ---------- */
.wizard-progress-card {
    background: #f5f5f9;
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e4e6e8;
}
.wizard-progress-bar {
    height: 6px;
    border-radius: 6px;
    background: #696cff;
    transition: width 0.3s ease;
}
.wizard-progress-bar.success {
    background: #71dd37;
}
.wizard-progress-bg {
    background-color: #e4e6e8;
    border-radius: 6px;
    overflow: hidden;
}

/* ---------- Wizard Step Card & Header ---------- */
.wizard-step-header {
    background: #696cff;
    color: white !important;
    padding: 0.75rem 1.25rem;
    border-radius: 8px 8px 0 0;
}
.wizard-step-header.success { background: #71dd37; }
.wizard-step-header.warning { background: #ffab00; }
.wizard-step-header h3 {
    color: white !important;
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}
.wizard-step-header p {
    color: rgba(255,255,255,0.9) !important;
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
}
.wizard-step-card {
    border-radius: 8px;
    border: 1px solid #e4e6e8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* ---------- Wizard Footer & Buttons ---------- */
.wizard-footer {
    background: #f5f5f9;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e4e6e8;
    border-radius: 0 0 8px 8px;
}
.wizard-btn-next {
    background: #696cff;
    border: none;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    border-radius: 6px;
    color: white;
    transition: all 0.2s ease;
}
.wizard-btn-next:hover:not(:disabled) {
    background: #5f61e6;
    box-shadow: 0 2px 6px rgba(105,108,255,0.25);
    color: white;
}
.wizard-btn-next:disabled { opacity: 0.5; cursor: not-allowed; }
.wizard-btn-back {
    background: white;
    border: 1px solid #e4e6e8;
    color: #646e78;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.wizard-btn-back:hover {
    background: #f5f5f9;
    border-color: #8592a3;
    color: #384551;
}
.wizard-btn-generate {
    background: #71dd37;
    border: none;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    border-radius: 6px;
    color: white;
    transition: all 0.2s ease;
}
.wizard-btn-generate:hover:not(:disabled) {
    background: #5bc12a;
    color: white;
}
.wizard-btn-add {
    background: #71dd37;
    border: none;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    border-radius: 6px;
    color: white;
    transition: all 0.2s ease;
}
.wizard-btn-add:hover {
    background: #5bc12a;
    color: white;
}
.wizard-btn-demo {
    background: #03c3ec;
    border: none;
    color: white;
    padding: 0.4rem 1rem;
    font-weight: 600;
    border-radius: 6px;
    font-size: 0.8rem;
}
.wizard-btn-demo:hover {
    background: #029fc4;
    color: white;
}

/* ---------- Wizard Form Controls ---------- */
.wizard-form-label {
    font-weight: 600;
    color: #384551;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}
.wizard-form-control {
    border: 1px solid #d9dee3;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s ease;
}
.wizard-form-control:focus {
    border-color: #696cff;
    box-shadow: 0 0 0 2px rgba(105,108,255,0.1);
}

/* ---------- Wizard Info/Warning/Success/Error Boxes ---------- */
.wizard-info-box {
    background: #e7f6ff;
    border-left: 3px solid #03c3ec;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.wizard-info-box h5, .wizard-info-box h6 { color: #0a6e8a; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.wizard-info-box p, .wizard-info-box li { color: #1a7fa3; font-size: 0.85rem; }

.wizard-warning-box {
    background: #fff8e6;
    border-left: 3px solid #ffab00;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}
.wizard-warning-box h5, .wizard-warning-box h6 { color: #8a6d00; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.wizard-warning-box p { color: #6b5500; margin: 0; font-size: 0.85rem; }

.wizard-success-box {
    background: #edf9e5;
    border-left: 3px solid #71dd37;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.wizard-success-box h5, .wizard-success-box h6 { color: #3a7a12; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.wizard-success-box p { color: #4a8a22; margin: 0; font-size: 0.85rem; }

.wizard-error-box {
    background: #fde8e8;
    border-left: 3px solid #ff3e1d;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.wizard-error-box h5, .wizard-error-box h6 { color: #a32a14; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.wizard-error-box p { color: #b33a24; margin: 0; font-size: 0.85rem; }

/* ---------- Wizard Badges ---------- */
.wizard-badge-success {
    background: #71dd37;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.wizard-badge-warning {
    background: #ffab00;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.wizard-badge-danger {
    background: #ff3e1d;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.wizard-badge-secondary {
    background: #8592a3;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ---------- Flat Icon Backgrounds ---------- */
.icon-gradient-primary { background: #696cff; color: white !important; }
.icon-gradient-primary i { color: white !important; }
.icon-gradient-success { background: #71dd37; color: white !important; }
.icon-gradient-success i { color: white !important; }
.icon-gradient-warning { background: #ffab00; color: white !important; }
.icon-gradient-warning i { color: white !important; }
.icon-gradient-info { background: #03c3ec; color: white !important; }
.icon-gradient-info i { color: white !important; }
.icon-gradient-danger { background: #ff3e1d; color: white !important; }
.icon-gradient-danger i { color: white !important; }
.icon-gradient-secondary { background: #8592a3; color: white !important; }
.icon-gradient-secondary i { color: white !important; }

/* ---------- Stats Cards ---------- */
.stats-card {
    border-radius: 8px;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.stats-card .card-body {
    padding: 1rem;
}
.stats-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 22px;
    color: white !important;
}
.stats-icon i { color: white !important; }
.stats-icon-sm {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 17px;
    color: white !important;
}
.stats-icon-sm i { color: white !important; }
.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.metric-label {
    font-size: 0.75rem;
    color: #a7acb2;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* ---------- Flat Color Cards (Dashboard) ---------- */
.card.gradient-primary { background-color: #696cff !important; color: white !important; }
.card.gradient-primary * { color: white !important; }
.card.gradient-success { background-color: #71dd37 !important; color: white !important; }
.card.gradient-success * { color: white !important; }
.card.gradient-warning { background-color: #ffab00 !important; color: white !important; }
.card.gradient-warning * { color: white !important; }
.card.gradient-danger { background-color: #ff3e1d !important; color: white !important; }
.card.gradient-danger * { color: white !important; }
.card.gradient-info { background-color: #03c3ec !important; color: white !important; }
.card.gradient-info * { color: white !important; }
.card.gradient-secondary { background-color: #8592a3 !important; color: white !important; }
.card.gradient-secondary * { color: white !important; }

/* ---------- Page Headers ---------- */
.dashboard-header,
.invoice-header,
.invoice-details-header {
    background: #696cff;
    color: white !important;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}
.dashboard-header *,
.invoice-header *,
.invoice-details-header * {
    color: white !important;
}
.dashboard-header h2,
.invoice-header h2,
.invoice-details-header h2 {
    font-size: 1.2rem;
    margin-bottom: 0.15rem;
}
.dashboard-header p,
.invoice-header p,
.invoice-details-header p {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* ---------- Section Cards (Invoice Details) ---------- */
.section-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.section-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.09);
}
.section-card .card-header {
    background: #f5f5f9;
    border-bottom: 1px solid #e4e6e8;
    padding: 0.875rem 1.25rem;
    border-radius: 8px 8px 0 0 !important;
}
.section-card .card-header h5 {
    font-weight: 600;
    color: #384551;
    margin: 0;
    font-size: 0.95rem;
}
.section-card .card-header i {
    margin-right: 0.4rem;
    color: #696cff;
}
.section-card .card-body {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* ---------- Table Card ---------- */
.table-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
}
.table-card .card-header {
    background: #f5f5f9;
    border-bottom: 1px solid #e4e6e8;
    padding: 0.875rem 1.25rem;
    border-radius: 8px 8px 0 0 !important;
}
.table-card .card-header h5 {
    font-weight: 600;
    color: #384551;
}
.table-card .card-body {
    padding: 1.25rem 1rem;
}

/* ---------- Action Buttons ---------- */
.action-btn {
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.action-btn:hover {
    transform: scale(1.03);
}

/* ---------- Quick Action / Misc ---------- */
.quick-action-btn {
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.quick-action-btn:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.device-item {
    padding: 0.6rem;
    border-bottom: 1px solid #e4e6e8;
}
.device-item:last-child {
    border-bottom: none;
}
.chart-container {
    position: relative;
    height: 280px;
}
.stat-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}
.qr-container {
    background: #f5f5f9;
    padding: 1.25rem;
    border-radius: 8px;
    text-align: center;
}

/* ---------- Card spacing on details pages ---------- */
/* Bootstrap's default card-header sits flush against the card-body content; the
   following rules give every details-page card consistent breathing room between
   the header and the first body row, regardless of which card class is used
   (.section-card, .table-card, or a plain Bootstrap .card with .card-header). */
.card > .card-header {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.card > .card-header + .card-body {
    padding-top: 1.25rem;
}
/* Tables-inside-cards (e.g. line items, Devices list): keep the table flush with
   the card edges, but pad the table's own header row so the header still has air
   below the card-header divider. */
.card > .card-header + .card-body.p-0 {
    padding-top: 0 !important;
}
.card > .card-header + .card-body.p-0 > .table-responsive > table.table > thead > tr > th {
    padding-top: 0.875rem;
}
/* If the card-body is wrapping a full-bleed table directly (no card-body wrapper
   around it - common pattern in invoice details), apply the same top spacing. */
.card > .card-header + table.table > thead > tr > th {
    padding-top: 0.875rem;
}

/* ---------- DataTable horizontal scrolling on small screens ---------- */
/* On narrow viewports the action column (View / XML / PDF) used to be clipped
   off-screen. We wrap the table in .table-responsive AND set scrollX on the
   DataTable; these rules make the result look intentional rather than glitchy. */
.dataTables_wrapper .dataTables_scroll {
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_scrollBody {
    -webkit-overflow-scrolling: touch;
}
/* Keep action buttons on a single line so they remain clickable when scrolled. */
table.dataTable td.text-nowrap,
table.dataTable th.text-nowrap {
    white-space: nowrap;
}
/* Slightly tighter action-btn spacing inside narrow datatable cells so the three
   buttons fit in ~260px without wrapping. */
table.dataTable .action-btn {
    padding: 0.3rem 0.55rem;
}