@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');


:root {
    --yellow : #ffcd68;
    --white  : #ffffff;
    --blue   : #006699;
}

body, html {
    font-family : 'DM Sans', sans-serif;
    font-size   : 14px;
    font-weight : 300;
    margin      : 0;
}

*, *::before, *::after {
    box-sizing : border-box;
}

content {
    display        : flex;
    flex-direction : column;
}

main {
    display        : flex;
    flex-direction : column;
    flex-grow      : 1;
}

main a {
    color : var(--blue)
}

main a:hover {
    color : var(--yellow)
}

.vwa_menu {
    margin : 20px;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance : none;
    margin             : 0;
}

input:read-only {
    background-color : rgb(220, 220, 220) !important;
    border-color     : rgb(118, 118, 118) !important;
}

/* Hide number input spinners */
input[type=number] {
    -moz-appearance : textfield;
    appearance      : textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance : none;
    margin             : 0;
}

select {
    padding     : 5px;
    font-weight : 300;
    font-family : 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
    font-size   : 14px;
    display     : inline-block;
    width       : auto;
    white-space : nowrap;
}

.form-max-width-fit {
    max-width : fit-content;
}

button {
    font-family : 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
    padding     : 5px 10px 5px 10px;
    cursor      : pointer;
    font-weight : 300;
}

.notebod {
    line-height : 24px;
}

#loginerr {
    color           : #ff0000;
    flex-wrap       : wrap;
    display         : flex;
    justify-content : center;
    flex-direction  : column;
    text-align      : center;
    width           : 200px;
    margin          : 0 auto;
}

#jumpto {
    display : inline-block;
    width   : auto;
}

.frmerrs {
    color           : #ff0000;
    flex-wrap       : wrap;
    display         : flex;
    justify-content : center;
    flex-direction  : column;
    text-align      : center;
    width           : 95%;
    margin          : 0 auto;
}

.ms_menu {
    margin : 20px;
}

.ms_list {
    margin : 20px;
}

.ms_add {
    margin     : 20px;
    padding    : 6px 10px 10px 15px;
    background : #FFF2FD;
    width      : 90%;
    max-width  : 450px;
    display    : none;
}

.faildiv, .successdiv {
    color      : var(--white);
    width      : 90%;
    max-width  : 400px;
    text-align : left;
    margin     : 20px;
    padding    : 10px;
    position   : absolute;
    top        : 2%;
    left       : 50%;
    transform  : translate(-50%, -2%);
    box-shadow : 0 0 23px -2px rgba(173, 173, 173, 1);
}

.faildiv {
    background : #D10F21;
}

.successdiv {
    background : #17A71A;
}

.faildiv a, .successdiv a {
    color : var(--white);
}

.mstbl {
    background-color : #EFEFEF;
    border-spacing   : 1px;
    border-collapse  : separate;
    margin-top       : 30px;
}

.mscell {
    padding    : 4px;
    text-align : left;
}

.mscell_clk {
    padding : 6px;
    cursor  : pointer;
}

.mscell_clk:hover {
    opacity : 0.75;
}

.mscell input {
    max-width : 85%;
}

.antbl {
    width      : 100%;
    align-self : center;
}

.msheadrow {
    background-color : rgb(255, 205, 104);
}

.evenrow {
    background-color : #ffffff;
}

.oddrow {
    background-color : #FFF2F8;
}

.dcimg {
    width     : 95%;
    max-width : 800px;
}

.notediv {
    position         : fixed;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    padding          : 10px;
    border           : #bbbbbb solid 1px;
    width            : 90%;
    max-width        : 600px;
    z-index          : 10;
    background-color : #ffffff;
    max-height       : 90%;
    overflow         : auto;
}

.noteauth {
    color : #f72586;
}

.innernotediv {
    padding        : 10px;
    display        : flex;
    flex-direction : column;
    width          : 90%;
}

.curtain {
    width            : 100%;
    height           : 100%;
    position         : fixed;
    top              : 0;
    left             : 0;
    z-index          : 5;
    background-color : rgba(255, 255, 255, 0.75);
}

.nndiv {
    width   : 95%;
    padding : 10px;
    margin  : 0 auto;
}

.mcsrt_iptdiv {
    display        : flex;
    flex-direction : row;
}

.skudiv {
    display : none;
}

.sr_tble td {
    white-space    : normal;
    vertical-align : top;
}

.ordnumcell {
    min-width : 60px;
    max-width : 60px;
}

.daycell {
    min-width : 35px;
    max-width : 35px;
}

.totalcell {
    min-width : 90px;
    max-width : 90px;
}

.valcell {
    min-width : 90px;
    max-width : 90px;
}

.disccell {
    min-width : 75px;
    max-width : 75px;
}

.ordtypecell {
    min-width : 120px;
    max-width : 120px;
}

.orgcell {
    min-width : 200px;
    max-width : 200px;
}

.skucell {
    min-width : 250px;
    max-width : 250px;
}

.keycell {
    min-width : 275px;
    max-width : 275px;
    word-wrap : break-word;
}

.rmkcell {
    min-width   : 250px;
    white-space : nowrap !important;
}

/* Ensure jQuery UI autocomplete appears on top of the popup */
.ui-autocomplete {
    z-index : 2002 !important; /* or any value above 1001 */
}

/* Centered popup box */
.popup {
    position   : fixed;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    background : #f7f7f7; /* Very light grey background */
    border     : 1px solid #ccc; /* Border to help it stand out */
    padding    : 20px;
    box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);
    display    : none;
    z-index    : 1001;
    max-width  : 400px;
    width      : 90%;
}

/* Basic styling for form elements */
.popup form label {
    display    : block;
    margin-top : 10px;
}

.popup form input, .popup form select, .popup form textarea {
    width      : 100%;
    padding    : 5px;
    margin-top : 5px;
    box-sizing : border-box;
}

.popup form button {
    margin-top : 15px;
    padding    : 8px 12px;
}

.popup form .button-group {
    display         : flex;
    justify-content : space-between;
}

.flexcolcontent {
    display         : flex;
    flex-direction  : column;
    /* Align items to the left on the cross axis */
    align-items     : flex-start;
    /* Position them at the top (start) on the main axis */
    justify-content : flex-start;
}

.searchContainer {
    display               : grid;
    /* Two columns: first is "max-content" for the labels,
      second is "auto" to expand for inputs */
    grid-template-columns : max-content auto;
    gap                   : 8px; /* space between rows & columns */
    border                : 1px solid #ccc;
    padding               : 10px;
    justify-items         : start; /* Ensures children are left-aligned, not stretched */
    margin-bottom         : 20px;
    background-color      : #f9f9f9; /* optional subtle background */
    margin-top            : 20px;
}

.searchContainer h3 {
    grid-column   : 1 / 3; /* span both columns for the heading */
    margin-top    : 0;
    margin-bottom : 10px;
}

.searchContainer > label, .searchContainer > div, .searchContainer > select, .searchContainer > button {
    align-self : center;
}

/* Desktop Table Styling */
table.commonTable {
    border-collapse : separate;
    border-spacing  : 0;
    width           : auto;
    font-size       : 0.9rem;
    border-radius   : 12px;
    overflow        : hidden;
    box-shadow      : 0 2px 8px rgba(0, 0, 0, 0.06);
}

table.commonTable thead {
    background : linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

table.commonTable thead th {
    color          : #fff;
    font-weight    : 500;
    padding        : 14px 16px;
    text-align     : left;
    text-transform : uppercase;
    font-size      : 0.75rem;
    letter-spacing : 0.05em;
    border         : none;
}

table.commonTable thead th:first-child {
    border-top-left-radius : 12px;
}

table.commonTable thead th:last-child {
    border-top-right-radius : 12px;
}

table.commonTable tbody tr {
    transition : background 0.15s ease;
}

table.commonTable tbody tr:hover {
    background : rgba(0, 0, 0, 0.02);
}

table.commonTable tbody td {
    padding       : 8px 12px;
    border        : none;
    border-bottom : 1px solid #eee;
    color         : #333;
    white-space   : nowrap;
}

table.commonTable tbody tr:last-child td {
    border-bottom : none;
}

table.commonTable tbody tr:last-child td:first-child {
    border-bottom-left-radius : 12px;
}

table.commonTable tbody tr:last-child td:last-child {
    border-bottom-right-radius : 12px;
}

button.commonBtn {
    font-size : 12px;
}

.login-wrapper {
    min-height      : 100vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : #fff;
    padding         : 20px;
    box-sizing      : border-box;
}

.login-logo {
    display   : block;
    margin    : 0 auto 20px auto;
    max-width : 180px;
    height    : auto;
}

.login-card {
    background    : linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);
    border        : 1px solid #e0e0e0;
    border-radius : 12px;
    padding       : 40px 40px;
    width         : 90%;
    max-width     : 380px;
    box-shadow    : 0 4px 24px rgba(0, 0, 0, 0.08);
}

.login-header {
    text-align    : center;
    margin-bottom : 36px;
}

.login-title {
    color          : #1a1a1a;
    font-size      : 1.5rem;
    font-weight    : 500;
    margin         : 0 0 8px 0;
    letter-spacing : -0.02em;
}

.login-subtitle {
    color       : rgba(0, 0, 0, 0.5);
    font-size   : 0.9rem;
    margin      : 0;
    font-weight : 400;
}

.login-form {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
}

.form-group {
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.form-label {
    color       : rgba(0, 0, 0, 0.7);
    font-size   : 0.90rem;
    font-weight : 450;
}

.form-input {
    background    : #fff;
    border        : 1px solid #d0d0d0;
    border-radius : 8px;
    padding       : 14px 16px;
    color         : #1a1a1a;
    transition    : all 0.15s ease;
    outline       : none;
    font-family   : inherit;
}

.form-input::placeholder {
    color : rgba(0, 0, 0, 0.35);
}

.form-input:focus {
    border-color : #999;
    box-shadow   : 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.login-btn {
    background    : #2d2d2d;
    color         : #fff;
    border        : none;
    border-radius : 8px;
    padding       : 14px 24px;
    font-size     : 0.95rem;
    font-weight   : 500;
    cursor        : pointer;
    transition    : all 0.15s ease;
    margin-top    : 8px;
    font-family   : inherit;
}

.login-btn:hover {
    background : #404040;
}

.login-btn:active {
    transform : scale(0.98);
}

.login-error {
    background    : rgba(239, 68, 68, 0.08);
    border        : 1px solid rgba(239, 68, 68, 0.25);
    border-radius : 8px;
    padding       : 12px 16px;
    color         : #dc2626;
    font-size     : 0.85rem;
    text-align    : center;
}

/* Dashboard Action Cards */
.dashboard-actions {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(200px, 260px));
    gap                   : 12px;
    margin-top            : 24px;
    margin-bottom         : 24px;
    justify-content       : start;
}

.action-card {
    background      : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border          : 1px solid #e0e0e0;
    border-radius   : 8px;
    padding         : 12px 14px;
    text-decoration : none;
    color           : inherit;
    transition      : all 0.2s ease;
    display         : flex;
    flex-direction  : column;
    gap             : 4px;
    cursor          : pointer;
}

.action-card:hover {
    border-color : #c0c0c0;
    box-shadow   : 0 2px 8px rgba(0, 0, 0, 0.08);
    transform    : translateY(-1px);
}

.action-card-title {
    font-size   : 0.95rem;
    font-weight : 600;
    color       : #1a1a1a;
    display     : flex;
    align-items : center;
    gap         : 8px;
}

.action-card-icon {
    width  : 18px;
    height : 18px;
    color  : var(--blue);
}

.action-card-description {
    font-size   : 0.78rem;
    color       : #666;
    line-height : 1.4;
}

/* For button-triggered actions (no href) */
button.action-card {
    text-align  : left;
    font-family : inherit;
    width       : 100%;
}

/* Page Header */
.page-header {
    margin-bottom : 24px;
}

.page-header h1 {
    margin      : 0 0 4px 0;
    font-size   : 1.75rem;
    font-weight : 600;
    color       : #1a1a1a;
}

.page-subtitle {
    margin    : 0;
    color     : #666;
    font-size : 0.95rem;
}

/* Messages */
.message-container {
    margin-bottom  : 20px;
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.message {
    padding         : 12px 16px;
    border-radius   : 8px;
    font-size       : 0.9rem;
    background      : #f0f0f0;
    border          : 1px solid #ddd;
    position        : relative;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

.message-close {
    background  : none;
    border      : none;
    color       : inherit;
    opacity     : 0.6;
    cursor      : pointer;
    font-size   : 0.85rem;
    padding     : 0;
    margin-left : 16px;
    transition  : opacity 0.15s ease;
}

.message-close:hover {
    opacity : 1;
}

.message.fade-out {
    opacity    : 0;
    transition : opacity 0.3s ease;
}

.message-error {
    background   : rgba(239, 68, 68, 0.1);
    border-color : rgba(239, 68, 68, 0.3);
    color        : #dc2626;
}

.message-success {
    background   : rgba(34, 197, 94, 0.1);
    border-color : rgba(34, 197, 94, 0.3);
    color        : #16a34a;
}

/* Modal Styles */
.modal-overlay {
    position        : fixed;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background      : rgba(0, 0, 0, 0.5);
    display         : flex;
    align-items     : center;
    justify-content : center;
    z-index         : 2000;
    opacity         : 0;
    visibility      : hidden;
    transition      : all 0.2s ease;
}

.modal-overlay.active {
    opacity    : 1;
    visibility : visible;
}

.modal {
    position      : fixed;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    background    : #fff;
    border-radius : 12px;
    width         : 90%;
    max-width     : 480px;
    max-height    : 90vh;
    overflow-y    : auto;
    box-shadow    : 0 8px 32px rgba(0, 0, 0, 0.2);
    transition    : transform 0.2s ease, opacity 0.2s ease;
    opacity       : 0;
}

.modal-overlay.active .modal {
    opacity : 1;
}

.modal-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 20px 24px;
    border-bottom   : 1px solid #eee;
}

.modal-title {
    margin      : 0;
    font-size   : 1.1rem;
    font-weight : 600;
    color       : #1a1a1a;
}

.modal-close {
    background  : none;
    border      : none;
    font-size   : 1.5rem;
    color       : #999;
    cursor      : pointer;
    padding     : 0;
    line-height : 1;
    transition  : color 0.15s ease;
}

.modal-close:hover {
    color : #333;
}

.modal-body {
    padding : 24px;
}

.modal-description {
    margin    : 0 0 20px 0;
    color     : #666;
    font-size : 0.9rem;
}

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

.modal-actions {
    display         : flex;
    justify-content : flex-end;
    gap             : 12px;
    margin-top      : 8px;
}

/* Buttons */
.btn {
    padding         : 10px 18px;
    border-radius   : 8px;
    font-size       : 0.9rem;
    font-weight     : 500;
    cursor          : pointer;
    transition      : all 0.15s ease;
    font-family     : inherit;
    /* An <a class="btn"> would otherwise inherit the default link
       underline and sit on the text baseline. Affects the Clear button
       here and the whole learn/classes navigation. */
    text-decoration : none;
    display         : inline-block;
    text-align      : center;
}

.btn-primary {
    background : #1a1a1a;
    color      : #fff;
    border     : none;
}

.btn-primary:hover {
    background : #333;
}

.btn-secondary {
    background : #fff;
    color      : #666;
    border     : 1px solid #ddd;
}

.btn-secondary:hover {
    background   : #f5f5f5;
    border-color : #ccc;
}

/* Form select styling */
select.form-input {
    appearance          : none;
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 12px center;
    padding-right       : 36px;
}

/* File input styling */
input[type="file"].form-input {
    padding : 10px;
}

.breadcrumb {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    font-size     : 0.85rem;
    color         : #666;
    margin-bottom : 16px;
}

.breadcrumb a {
    color           : #666;
    text-decoration : none;
    transition      : color 0.15s ease;
}

.breadcrumb a:hover {
    color : var(--blue);
}

.breadcrumb-separator {
    color : #ccc;
}

.breadcrumb-current {
    color       : #1a1a1a;
    font-weight : 500;
}

/* Invoice table row colors */
.invoice-current {
    background : linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.03) 100%);
}

.invoice-overdue {
    background : linear-gradient(90deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.04) 100%);
}

.invoice-overdue-severe {
    background : linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.03) 100%);
}

/* Paid. Deliberately a good deal stronger than .invoice-current, which is the
   same hue at 8% - "not due yet" and "settled" have to stay tellable apart. */
.invoice-paid {
    background : linear-gradient(90deg, rgba(34, 197, 94, 0.22) 0%, rgba(34, 197, 94, 0.08) 100%);
}

/* Invoice total styling */
.invoices-total {
    font-size     : 1.1rem;
    font-weight   : 600;
    color         : #1a1a1a;
    margin-bottom : 16px;
}

.search-panel {
    background    : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border        : 1px solid #e0e0e0;
    border-radius : 10px;
    /* No bottom padding: the last element inside supplies it, so the
       24px used to stack on top of .search-panel-grid's 20px margin. */
    padding       : 18px 18px 0 18px;
    width         : fit-content;
    max-width     : 100%;
}

.search-panel-title {
    margin      : 0 0 20px 0;
    font-size   : 1.1rem;
    font-weight : 600;
    color       : #1a1a1a;
}

.search-panel-grid {
    display               : grid;
    grid-template-columns : auto auto auto auto;
    gap                   : 16px;
    margin-bottom         : 20px;
    justify-content       : start;
}

.search-panel-actions {
    display         : flex;
    justify-content : flex-end;
    gap             : 12px;
    /* Last element in panels that put their actions below the grid
       (renewals, import_orders, mcs-todo, db.js). .search-panel has no
       bottom padding, so without this the button sits on the edge. */
    margin-bottom   : 18px;
}

/* Search buttons as a cell INSIDE .search-panel-grid, level with the
   inputs rather than on a line of their own.

   Built as a .form-group with a spacer label, so the label height and
   the 8px gap come from .form-group itself and the buttons line up with
   the inputs automatically. The row then takes the remaining height with
   flex:1 and the buttons stretch into it, so they match the height of a
   .form-input exactly without anything here hard-coding what that is. */
.search-panel-buttons-row {
    display : flex;
    gap     : 12px;
    flex    : 1;
}

.search-panel-buttons-row .btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    padding-top     : 0;
    padding-bottom  : 0;
}

/* Form Row (for side-by-side fields in modals) */
.form-row {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(150px, 1fr));
    gap                   : 16px;
}

/* Modal Variants */
.modal-wide {
    max-width : 600px;
}

.modal-small {
    max-width : 400px;
}

/* Danger Button */
.btn-danger {
    background : #dc2626;
    color      : #fff;
    border     : none;
}

.btn-danger:hover {
    background : #b91c1c;
}

.renewal-open {
    background : linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
}

.renewal-won {
    background : linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.03) 100%);
}

.renewal-lost {
    background : linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.03) 100%);
}

/* Transferred: the customer was acquired and the renewal moved to a successor
   account. Deliberately neutral — it is neither a win nor a loss. */
.renewal-transferred {
    background : linear-gradient(90deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.03) 100%);
}

/* Hover states for colored rows */
table.commonTable tbody tr.invoice-current:hover {
    background : linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.06) 100%);
}

table.commonTable tbody tr.invoice-overdue:hover {
    background : linear-gradient(90deg, rgba(234, 179, 8, 0.18) 0%, rgba(234, 179, 8, 0.08) 100%);
}

table.commonTable tbody tr.invoice-overdue-severe:hover {
    background : linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.06) 100%);
}

table.commonTable tbody tr.invoice-paid:hover {
    background : linear-gradient(90deg, rgba(34, 197, 94, 0.30) 0%, rgba(34, 197, 94, 0.12) 100%);
}

table.commonTable tbody tr.renewal-open:hover {
    background : linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);
}

table.commonTable tbody tr.renewal-won:hover {
    background : linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.06) 100%);
}

table.commonTable tbody tr.renewal-lost:hover {
    background : linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.06) 100%);
}

table.commonTable tbody tr.renewal-transferred:hover {
    background : linear-gradient(90deg, rgba(100, 116, 139, 0.16) 0%, rgba(100, 116, 139, 0.06) 100%);
}

/* Data Cards (Mobile) */
.data-cards {
    display        : flex;
    flex-direction : column;
    gap            : 16px;
}

.data-card {
    background    : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border        : 1px solid #e0e0e0;
    border-radius : 12px;
    padding       : 16px;
    box-shadow    : 0 2px 8px rgba(0, 0, 0, 0.04);
}

.data-card.card-blue {
    background   : linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
    border-color : #bfdbfe;
}

.data-card.card-green {
    background   : linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
    border-color : #bbf7d0;
}

.data-card.card-red {
    background   : linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
    border-color : #fecaca;
}

.data-card.card-grey {
    background   : linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-color : #cbd5e1;
}

.data-card.card-yellow {
    background   : linear-gradient(145deg, #fefce8 0%, #fef9c3 100%);
    border-color : #fde047;
}

/* Paid card: deeper than card-green, which means "not due yet". */
.data-card.card-paid {
    background   : linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%);
    border-color : #4ade80;
}

.data-card-header {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    margin-bottom   : 8px;
    gap             : 12px;
}

.data-card-title {
    font-weight : 600;
    font-size   : 1.05rem;
    color       : #1a1a1a;
}

.data-card-badge {
    font-size     : 0.75rem;
    font-weight   : 500;
    padding       : 4px 10px;
    border-radius : 20px;
    white-space   : nowrap;
}

.data-card-badge.badge-blue {
    background : #dbeafe;
    color      : #1e40af;
}

.data-card-badge.badge-green {
    background : #dcfce7;
    color      : #166534;
}

.data-card-badge.badge-paid {
    background : #16a34a;
    color      : #ffffff;
}

.data-card-badge.badge-red {
    background : #fee2e2;
    color      : #991b1b;
}

.data-card-badge.badge-grey {
    background : #e2e8f0;
    color      : #334155;
}

.data-card-badge.badge-yellow {
    background : #fef9c3;
    color      : #854d0e;
}

.data-card-subtitle {
    font-size     : 0.85rem;
    color         : #666;
    margin-bottom : 16px;
}

.data-card-values {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 12px;
    margin-bottom         : 16px;
}

.data-card-value {
    display        : flex;
    flex-direction : column;
    gap            : 2px;
}

.data-card-value .value-label {
    font-size      : 0.75rem;
    color          : #888;
    text-transform : uppercase;
    letter-spacing : 0.02em;
}

.data-card-value .value-amount {
    font-size   : 0.95rem;
    font-weight : 500;
    color       : #1a1a1a;
}

.data-card-actions {
    display     : flex;
    gap         : 8px;
    padding-top : 12px;
    border-top  : 1px solid rgba(0, 0, 0, 0.08);
}

.data-card-actions .btn {
    flex       : 1;
    text-align : center;
    padding    : 10px 12px;
}

.year-section {
    margin-bottom : 40px;
}

.year-title {
    font-size      : 1.5rem;
    font-weight    : 600;
    color          : #1a1a1a;
    margin         : 0 0 24px 0;
    padding-bottom : 8px;
    border-bottom  : 1px solid #e0e0e0;
}

.month-section {
    margin-bottom : 32px;
}

.month-header {
    display         : flex;
    align-items     : center;
    justify-content : flex-start;
    margin-bottom   : 16px;
    flex-wrap       : wrap;
    gap             : 12px;
}

.month-title {
    font-size   : 1.1rem;
    font-weight : 600;
    color       : #333;
    margin      : 0;
}

.month-total {
    font-size     : 1rem;
    font-weight   : 600;
    color         : var(--blue);
    background    : rgba(0, 102, 153, 0.1);
    padding       : 6px 12px;
    border-radius : 6px;
}

.discount-negative {
    color : #dc2626;
}

.sku-toggle {
    color     : var(--blue);
    cursor    : pointer;
    font-size : 0.8rem;
}

.sku-toggle:hover {
    text-decoration : underline;
}

.skudiv {
    display      : none;
    margin-top   : 4px;
    padding-left : 8px;
    border-left  : 2px solid #e0e0e0;
}

.order-type-po {
    color : #7c3aed;
}

.order-type-cc {
    color : #059669;
}

/* Mobile card additions */
.order-card-sku {
    font-size : 0.85rem;
    color     : #444;
}

.order-card-keys {
    font-size  : 0.8rem;
    color      : #666;
    word-break : break-all;
}

.order-card-remarks {
    font-size  : 0.8rem;
    color      : #666;
    font-style : italic;
}

.order-card-meta {
    display    : flex;
    gap        : 16px;
    flex-wrap  : wrap;
    margin-top : 8px;
}

.order-card-meta-item {
    font-size : 0.8rem;
    color     : #666;
}

.order-card-meta-item strong {
    color : #333;
}

.summary-cards {
    display : none;
}

.summary-cards.visible {
    display : grid;
}

.summary-card {
    cursor : default;
}

.summary-card-value {
    font-size   : 1.5rem;
    font-weight : 600;
    color       : #1a1a1a;
}

.summary-card-mcs11 {
    border-left : 3px solid #22c55e;
}

.summary-card-mcs11 .summary-card-value {
    color : #22c55e;
}

.summary-card-mcs10 {
    border-left : 3px solid #3b82f6;
}

.summary-card-mcs10 .summary-card-value {
    color : #3b82f6;
}

.summary-card-mcs9 {
    border-left : 3px solid #f59e0b;
}

.summary-card-mcs9 .summary-card-value {
    color : #f59e0b;
}

.version-section {
    margin-top : 32px;
}

.version-section-title {
    font-size   : 1.25rem;
    font-weight : 600;
    color       : #1a1a1a;
    margin      : 0 0 16px 0;
}

.version-section-count {
    font-weight : 400;
    color       : #666;
    font-size   : 1rem;
}

.license-key {
    font-family : monospace;
    font-size   : 0.9rem;
}

.license-key-mobile {
    font-family : monospace;
    font-size   : 0.9rem;
    word-break  : break-all;
}

.col-narrow {
    width : 50px;
}

.col-actions {
    width : 100px;
}

.btn-small {
    padding   : 6px 12px;
    font-size : 0.8rem;
}

/* Download Logs */
.stats-row {
    display       : flex;
    gap           : 16px;
    flex-wrap     : wrap;
    margin-bottom : 24px;
}

.stat-card {
    background    : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border        : 1px solid #e0e0e0;
    border-radius : 10px;
    padding       : 20px 24px;
    min-width     : 150px;
}

.stat-card-label {
    font-size      : 0.8rem;
    color          : #666;
    text-transform : uppercase;
    letter-spacing : 0.03em;
    margin-bottom  : 4px;
}

.stat-card-value {
    font-size   : 1.75rem;
    font-weight : 600;
    color       : #1a1a1a;
}

.stat-card-value-small {
    font-size : 1rem;
}

.stat-card-value.highlight-blue {
    color : var(--blue);
}

.stat-card-value.highlight-green {
    color : #22c55e;
}

.info-box {
    background    : #f8fafc;
    border        : 1px solid #e2e8f0;
    border-left   : 3px solid var(--blue);
    border-radius : 6px;
    padding       : 12px 16px;
    margin-bottom : 24px;
    font-size     : 0.9rem;
    color         : #475569;
}

.info-box p {
    margin : 0 0 4px 0;
}

.info-box p:last-child {
    margin-bottom : 0;
}

.download-count {
    font-weight          : 600;
    font-variant-numeric : tabular-nums;
}

.text-right {
    text-align : right;
}

/* Progress Bar */
.progress-container {
    margin-bottom : 24px;
}

.progress-stage {
    margin-bottom : 16px;
}

.progress-label {
    display         : flex;
    justify-content : space-between;
    margin-bottom   : 6px;
    font-size       : 0.9rem;
    color           : #333;
}

.progress-label-text {
    font-weight : 500;
}

.progress-label-value {
    color                : #666;
    font-variant-numeric : tabular-nums;
}

.progress-bar-outer {
    width         : 100%;
    height        : 8px;
    background    : #e5e7eb;
    border-radius : 4px;
    overflow      : hidden;
}

.progress-bar-inner {
    height        : 100%;
    background    : linear-gradient(90deg, var(--blue) 0%, #0088cc 100%);
    border-radius : 4px;
    transition    : width 0.15s ease;
    width         : 0%;
}

.progress-bar-inner.complete {
    background : linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.progress-bar-inner.processing {
    background : linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.progress-status {
    margin-top : 8px;
    font-size  : 0.85rem;
    color      : #666;
}

.progress-hidden {
    display : none;
}

/* Download Logs - File Sections */
.file-section {
    background    : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border        : 1px solid #e0e0e0;
    border-radius : 10px;
    margin-bottom : 16px;
    overflow      : hidden;
}

.file-section-header {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 16px 20px;
    cursor          : pointer;
    transition      : background 0.15s ease;
}

.file-section-header:hover {
    background : rgba(0, 0, 0, 0.02);
}

.file-section-title {
    display     : flex;
    align-items : center;
    gap         : 12px;
}

.file-section-name {
    font-weight : 600;
    font-size   : 1rem;
    color       : #1a1a1a;
    font-family : monospace;
}

.file-section-count {
    background    : var(--blue);
    color         : #fff;
    font-size     : 0.8rem;
    font-weight   : 500;
    padding       : 4px 10px;
    border-radius : 12px;
}

.file-section-toggle {
    color      : #666;
    transition : transform 0.2s ease;
}

.file-section-toggle.expanded {
    transform : rotate(180deg);
}

.file-section-body {
    display    : none;
    border-top : 1px solid #e0e0e0;
    padding    : 16px 20px;
    background : #fafafa;
}

.file-section-body.expanded {
    display : block;
}

.source-list {
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.source-item {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 10px 14px;
    background      : #fff;
    border          : 1px solid #eee;
    border-radius   : 6px;
}

.source-item-name {
    font-size  : 0.9rem;
    color      : #333;
    word-break : break-all;
}

.source-item-name.direct {
    color      : #666;
    font-style : italic;
}

.source-item-count {
    font-weight : 600;
    font-size   : 0.9rem;
    color       : var(--blue);
    white-space : nowrap;
    margin-left : 16px;
}

.source-item-details {
    flex      : 1;
    min-width : 0;
}

.source-bar {
    height        : 4px;
    background    : #e5e7eb;
    border-radius : 2px;
    margin-top    : 6px;
    overflow      : hidden;
}

.source-bar-fill {
    height        : 100%;
    background    : var(--blue);
    border-radius : 2px;
    transition    : width 0.3s ease;
}


/* Filter/Search for files */
.filter-bar {
    display       : flex;
    gap           : 12px;
    margin-bottom : 20px;
    flex-wrap     : wrap;
    align-items   : center;
}

.filter-input {
    flex      : 1;
    min-width : 200px;
    max-width : 400px;
}

.filter-count {
    font-size : 0.9rem;
    color     : #666;
}

.no-results {
    text-align : center;
    padding    : 40px 20px;
    color      : #666;
}

/* Tabs */
.tab-bar {
    display        : flex;
    gap            : 4px;
    margin-bottom  : 24px;
    border-bottom  : 1px solid #e0e0e0;
    padding-bottom : 0;
}

.tab-btn {
    padding       : 12px 20px;
    border        : none;
    background    : none;
    font-size     : 0.95rem;
    font-weight   : 500;
    color         : #666;
    cursor        : pointer;
    border-bottom : 2px solid transparent;
    margin-bottom : -1px;
    transition    : all 0.15s ease;
}

.tab-btn:hover {
    color : #333;
}

.tab-btn.active {
    color               : var(--blue);
    border-bottom-color : var(--blue);
}

.tab-content {
    display : none;
}

.tab-content.active {
    display : block;
}

/* Image Gallery */
.gallery-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
    gap                   : 16px;
    margin-top            : 16px;
}

.gallery-thumb {
    aspect-ratio  : 4/3;
    overflow      : hidden;
    border-radius : 8px;
    cursor        : pointer;
    border        : 1px solid #e0e0e0;
    transition    : all 0.2s ease;
}

.gallery-thumb:hover {
    border-color : var(--blue);
    box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.1);
    transform    : translateY(-2px);
}

.gallery-thumb img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.2s ease;
}

.gallery-thumb:hover img {
    transform : scale(1.05);
}

/* Lightbox */
.lightbox-overlay {
    position        : fixed;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background      : rgba(0, 0, 0, 0.95);
    display         : flex;
    align-items     : center;
    justify-content : center;
    z-index         : 3000;
    opacity         : 0;
    visibility      : hidden;
    transition      : all 0.2s ease;
}

.lightbox-overlay.active {
    opacity    : 1;
    visibility : visible;
}

.lightbox-content {
    position        : relative;
    max-width       : 90vw;
    max-height      : 90vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.lightbox-content img {
    max-width     : 90vw;
    max-height    : 85vh;
    object-fit    : contain;
    border-radius : 4px;
}

.lightbox-close {
    position        : absolute;
    top             : 20px;
    right           : 20px;
    background      : rgba(255, 255, 255, 0.1);
    border          : none;
    color           : #fff;
    width           : 44px;
    height          : 44px;
    border-radius   : 50%;
    cursor          : pointer;
    font-size       : 1.5rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : background 0.15s ease;
    z-index         : 3001;
}

.lightbox-close:hover {
    background : rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    background      : rgba(255, 255, 255, 0.1);
    border          : none;
    color           : #fff;
    width           : 50px;
    height          : 50px;
    border-radius   : 50%;
    cursor          : pointer;
    font-size       : 1.5rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : background 0.15s ease;
}

.lightbox-nav:hover {
    background : rgba(255, 255, 255, 0.2);
}

.lightbox-nav.prev {
    left : 20px;
}

.lightbox-nav.next {
    right : 20px;
}

.lightbox-counter {
    position  : absolute;
    bottom    : 20px;
    left      : 50%;
    transform : translateX(-50%);
    color     : rgba(255, 255, 255, 0.7);
    font-size : 0.9rem;
}

.lightbox-caption {
    position   : absolute;
    bottom     : 50px;
    left       : 50%;
    transform  : translateX(-50%);
    color      : #fff;
    font-size  : 0.95rem;
    text-align : center;
    max-width  : 80%;
}

/* Info Cards for DC details */
.dc-info-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
    gap                   : 16px;
    margin-bottom         : 24px;
}

.dc-info-card {
    background    : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border        : 1px solid #e0e0e0;
    border-radius : 10px;
    padding       : 20px;
}

.dc-info-card-title {
    font-size      : 0.8rem;
    font-weight    : 500;
    color          : #666;
    text-transform : uppercase;
    letter-spacing : 0.03em;
    margin-bottom  : 8px;
}

.dc-info-card-content {
    font-size   : 1rem;
    color       : #1a1a1a;
    line-height : 1.5;
}

.dc-info-card-content a {
    color           : var(--blue);
    text-decoration : none;
}

.dc-info-card-content a:hover {
    text-decoration : underline;
}

/* IP List */
.ip-list {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 8px;
    margin-top : 8px;
}

.ip-badge {
    background    : #f0f0f0;
    border        : 1px solid #e0e0e0;
    border-radius : 4px;
    padding       : 4px 10px;
    font-family   : monospace;
    font-size     : 0.85rem;
    color         : #333;
}

.ip-badge.issue {
    background      : #fef2f2;
    border-color    : #fecaca;
    color           : #991b1b;
    text-decoration : line-through;
}

/* Notes section */
.dc-notes {
    background    : #fffbeb;
    border        : 1px solid #fde68a;
    border-left   : 3px solid #f59e0b;
    border-radius : 6px;
    padding       : 16px;
    margin-top    : 16px;
}

.dc-notes-title {
    font-weight   : 600;
    color         : #92400e;
    margin-bottom : 8px;
}

.dc-notes ul {
    margin       : 0;
    padding-left : 20px;
    color        : #78350f;
}

.dc-notes li {
    margin-bottom : 6px;
}

.dc-notes li:last-child {
    margin-bottom : 0;
}

/* Access Instructions */
.access-steps {
    margin       : 0;
    padding-left : 24px;
    line-height  : 1.8;
}

.access-steps li {
    margin-bottom : 8px;
}

.access-steps li:last-child {
    margin-bottom : 0;
}

.access-code {
    background     : #1a1a1a;
    color          : #22c55e;
    padding        : 4px 10px;
    border-radius  : 4px;
    font-family    : monospace;
    font-size      : 1rem;
    font-weight    : 600;
    letter-spacing : 0.1em;
}

/* ACM overflow cells - truncate with ellipsis, full text on hover */
.acm-overflow-cell {
    max-width     : 200px;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.acm-overflow-cell:hover {
    overflow    : visible;
    white-space : normal;
    word-break  : break-word;
    position    : relative;
    z-index     : 1;
}

/* There was no base .info-section rule at all - only descendant styles -
   so consecutive sections ran into each other and cloud/js/si.js patched
   it with an inline margin-top. Its two blocks are unaffected: adjacent
   margins collapse, so 32px stays 32px. */
.info-section {
    margin-bottom : 32px;
}

/* "Already scheduled" warning in the next-renewal prompt (sales/renewals.php). */
.next-renewal-notice {
    padding       : 12px 16px;
    margin-bottom : 16px;
    border        : 1px solid #f0c36d;
    border-radius : 6px;
    background    : #fff8e1;
    color         : #5f4b00;
}

/* Account page tabs (sales/account.php). Panels are hidden only once
   account.js has added .js-tabs, so without JavaScript nothing disappears. */
.tab-nav {
    display       : flex;
    flex-wrap     : wrap;
    gap           : 4px;
    border-bottom : 2px solid #e5e7eb;
    margin        : 8px 0 24px;
}

.tab-link {
    padding         : 8px 14px;
    color           : #374151;
    text-decoration : none;
    border          : 1px solid transparent;
    border-bottom   : none;
    border-radius   : 6px 6px 0 0;
    margin-bottom   : -2px;
}

.tab-link:hover {
    background : #f3f4f6;
}

.tab-link.active {
    background    : #ffffff;
    border-color  : #e5e7eb;
    border-bottom : 2px solid #ffffff;
    color         : var(--blue);
    font-weight   : 600;
}

.tab-count {
    display       : inline-block;
    min-width     : 20px;
    padding       : 0 6px;
    margin-left   : 4px;
    border-radius : 10px;
    background    : #e5e7eb;
    color         : #374151;
    font-size     : 0.75rem;
    text-align    : center;
}

.tab-link.active .tab-count {
    background : var(--blue);
    color      : #ffffff;
}

.js-tabs .tab-panel:not(.active) {
    display : none;
}

.info-section h2 {
    font-size     : 1.25rem;
    font-weight   : 600;
    margin-bottom : 16px;
    color         : #111827;
}

.info-section .commonTable td:first-child {
    background-color : #f9fafb;
}

.lesson-list {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    max-width      : 700px;
}

.lesson-card {
    display         : flex;
    align-items     : center;
    gap             : 16px;
    background      : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border          : 1px solid #e0e0e0;
    border-radius   : 10px;
    padding         : 16px 20px;
    text-decoration : none;
    color           : inherit;
    transition      : all 0.2s ease;
}

.lesson-card:hover {
    border-color : #c0c0c0;
    box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.08);
    transform    : translateY(-2px);
}

.lesson-number {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 36px;
    height          : 36px;
    border-radius   : 50%;
    background      : #1a1a1a;
    color           : #fff;
    font-weight     : 600;
    font-size       : 0.9rem;
    flex-shrink     : 0;
}

.lesson-info {
    display        : flex;
    flex-direction : column;
    gap            : 2px;
    flex           : 1;
    min-width      : 0;
}

.lesson-title {
    font-weight : 600;
    font-size   : 1rem;
    color       : #1a1a1a;
}

.lesson-desc {
    font-size : 0.85rem;
    color     : #666;
}

.lesson-arrow {
    width       : 20px;
    height      : 20px;
    color       : #ccc;
    flex-shrink : 0;
    transition  : color 0.15s ease;
}

.lesson-card:hover .lesson-arrow {
    color : var(--blue);
}

/* Class Page */
.class-materials {
    display       : flex;
    gap           : 12px;
    flex-wrap     : wrap;
    margin-bottom : 24px;
}

.material-link {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 10px 18px;
    background      : linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border          : 1px solid #e0e0e0;
    border-radius   : 8px;
    text-decoration : none;
    color           : #1a1a1a;
    font-weight     : 500;
    font-size       : 0.9rem;
    transition      : all 0.15s ease;
}

.material-link:hover {
    border-color : #c0c0c0;
    box-shadow   : 0 2px 8px rgba(0, 0, 0, 0.08);
    color        : var(--blue);
}

.material-icon {
    width  : 18px;
    height : 18px;
}

.class-video {
    margin-bottom : 24px;
}

.class-video video {
    width         : 100%;
    max-width     : 1000px;
    border-radius : 10px;
    background    : #000;
    box-shadow    : 0 4px 16px rgba(0, 0, 0, 0.12);
}

.class-nav {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    max-width       : 1000px;
    padding-top     : 16px;
    border-top      : 1px solid #e0e0e0;
}

/* Action Item Badges */
.mtd-badge {
    display       : inline-block;
    padding       : 4px 12px;
    border-radius : 20px;
    font-size     : 0.8rem;
    font-weight   : 500;
    white-space   : nowrap;
}

.mtd-badge-clickable:hover {
    opacity : 0.8;
    filter  : brightness(0.95);
}

/* Inline Dropdown */
.mtd-inline-dropdown {
    background    : #fff;
    border        : 1px solid #e0e0e0;
    border-radius : 8px;
    box-shadow    : 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow      : hidden;
    min-width     : 140px;
}

.mtd-dropdown-option {
    padding     : 10px 16px;
    cursor      : pointer;
    font-size   : 0.85rem;
    font-weight : 500;
    transition  : opacity 0.15s ease;
}

.mtd-dropdown-option:hover {
    opacity : 0.8;
}

.mtd-dropdown-option + .mtd-dropdown-option {
    border-top : 1px solid rgba(0, 0, 0, 0.06);
}

/* Notes List */
.mtd-notes-list {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
}

.mtd-note-item {
    background    : #f9f9f9;
    border        : 1px solid #eee;
    border-radius : 8px;
    padding       : 12px 16px;
}

.mtd-note-text {
    font-size   : 0.9rem;
    color       : #333;
    line-height : 1.5;
}

.mtd-note-meta {
    font-size   : 0.8rem;
    color       : #f72586;
    margin-top  : 6px;
    font-weight : 500;
}

/* ============================================================
   MOBILE STYLES
   ============================================================
   Styles below this point apply to phones and small screens.
   Breakpoint: 480px and below
   ============================================================ */

@media (max-width : 768px) {
    .search-panel {
        width : 100%;
    }

    .search-panel-grid {
        grid-template-columns : 1fr;
    }

    .search-panel-grid .form-input {
        width : 100%;
    }

    .gallery-grid {
        grid-template-columns : repeat(2, 1fr);
        gap                   : 12px;
    }

    .lightbox-nav {
        width  : 40px;
        height : 40px;
    }

    .lightbox-nav.prev {
        left : 10px;
    }

    .lightbox-nav.next {
        right : 10px;
    }

    .tab-bar {
        overflow-x                 : auto;
        overflow-y                 : hidden;
        white-space                : nowrap;
        -webkit-overflow-scrolling : touch;
        scrollbar-width            : none; /* Firefox */
        -ms-overflow-style         : none; /* IE/Edge */
    }

    .tab-bar::-webkit-scrollbar {
        display : none; /* Chrome/Safari */
    }

    .tab-btn {
        display     : inline-block;
        flex-shrink : 0;
    }
}

@media (max-width : 480px) {
    .login-wrapper {
        align-items : flex-start;
        padding-top : 40px;
    }

    .login-card {
        padding       : 32px 24px;
        border-radius : 8px;
        box-shadow    : 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .login-logo {
        max-width     : 140px;
        margin-bottom : 10px;
    }

    .login-header {
        margin-bottom : 20px;
    }

    .login-title {
        font-size : 1.25rem;
    }

    .login-subtitle {
        font-size : 0.85rem;
    }

    .form-input {
        padding   : 12px 14px;
        font-size : 16px; /* Prevents iOS zoom on focus */
    }

    .login-btn {
        padding : 12px 20px;
    }

    .dashboard-actions {
        grid-template-columns : 1fr;
    }

    .action-card {
        padding : 12px 14px;
    }

    .form-row {
        grid-template-columns : 1fr;
    }

    .stats-row {
        flex-direction : column;
    }

    .stat-card {
        width : 100%;
    }

    .file-section-header {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 8px;
    }

    .file-section-toggle {
        position : absolute;
        right    : 16px;
        top      : 16px;
    }

    .file-section-header {
        position      : relative;
        padding-right : 40px;
    }

    .source-item {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 4px;
    }

    .source-item-count {
        margin-left : 0;
    }

    .gallery-grid {
        grid-template-columns : 1fr 1fr;
        gap                   : 8px;
    }
}
/* ============================================================
   ACCOUNT DETAIL PAGE
   ============================================================ */

/* A contact who has left the company: kept for history, visibly retired. */
tr.contact-left td {
    color   : #999;
    opacity : 0.7;
}


/* Constrain long-form pages so identity, contact and note blocks do not
   stretch across a wide monitor, which makes them hard to scan. Applied as
   a second class on <main>, so the sidebar's responsive margin-left rules
   are untouched. */
.page-narrow {
    max-width : 1000px;
}

/* Results sit clear of the search panel above them. renewals.php does this
   with an inline style on #renewalResults; this is the same 24px, but as a
   rule rather than an attribute. */
#accountResults {
    margin-top : 24px;
}

#accountResults .page-subtitle {
    margin-bottom : 12px;
}

/* Section heading with an action button on the right. */
.search-panel-title.section-heading {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 16px;
}

/* Contact rows open their own edit modal. */
tr.row-clickable {
    cursor : pointer;
}

tr.row-clickable:hover td {
    background : #f5f5f5;
}

/* Checkbox and its wording on one line, rather than the label sitting
   above the box as .form-label normally does. */
.form-label.checkbox-label {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-weight : normal;
    cursor      : pointer;
}

.form-label.checkbox-label input[type="checkbox"] {
    width  : auto;
    margin : 0;
}

/* Timeline entries open their own edit modal. */
.note-clickable {
    cursor : pointer;
}

.note-clickable:hover {
    background : #f2f2f2;
}

/* A confirmation opened from inside another modal. .modal and
   .modal-overlay share z-index 2000, so without this the confirmation
   would render behind the form that triggered it. */
.modal-overlay-top {
    z-index : 2100;
}

.modal-overlay-top .modal {
    z-index : 2101;
}

/* Edit / Delete beside the account title. */
.page-header-actions {
    display   : flex;
    gap       : 8px;
    margin-top: 12px;
}

/* A group of fields wrapped in a div inside .modal-form. The form is a
   flex column with a 16px gap, but that only spaces its DIRECT children,
   so anything inside a wrapper loses it. */
.form-section {
    display        : flex;
    flex-direction : column;
    gap            : 16px;
}

/* Inline validation errors. :not(:empty) so there is no phantom gap
   while the container is empty, which is most of the time. */
.modal-errors:not(:empty) {
    margin-top : 16px;
}

.page-errors:not(:empty) {
    margin-bottom : 20px;
}

/* Dead prospects: present, but visibly out of play. */
.data-card-badge.badge-dark {
    background : #cbd5e1;
    color      : #475569;
}

/* A prospect nobody has graded yet. Distinct from an empty cell so it
   reads as 'not assessed' rather than 'nothing here'. */
.stage-none {
    color : #bbb;
}

/* Sortable column headers. The header row is dark, so these must be
   light rather than inheriting the default link colour. */
.sort-link {
    color           : inherit;
    text-decoration : none;
    white-space     : nowrap;
}

.sort-link:hover {
    text-decoration : underline;
}

/* Secondary text inside a table cell or under a heading. */
.muted {
    color : #666;
}

/* Wide tables scroll inside their own box. The account page is capped at
   1000px by .page-narrow, and the order history carries a product list that
   can be long - without this the whole page scrolls sideways. */
.table-scroll {
    overflow-x : auto;
}

/* Licence keys and SKUs: fixed width so a transposed character is visible,
   and breakable because a key is 60+ characters with no spaces. */
.mono {
    font-family : ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size   : 0.92em;
}

/* Order search results: one line per row. Licence keys run to 60+ characters
   with no spaces, so wrapping made rows several lines tall and ragged. The
   table's own container scrolls sideways instead. */
.db-nowrap th,
.db-nowrap td {
    white-space : nowrap;
}

/* The "+9" riding inside a SKU / licence key link. Muted so it reads as a
   count of what is behind the link, not part of the value itself. */
.more-count {
    color       : #666;
    font-size   : 0.85em;
    margin-left : 2px;
}

/* A date edited in place in a list (sales/js/inline-date.js) */
.inline-date {
    background    : none;
    border        : none;
    border-bottom : 1px dashed #bbb;
    padding       : 0;
    font          : inherit;
    color         : inherit;
    cursor        : pointer;
    white-space   : nowrap;
}

.inline-date:hover {
    border-bottom-color : var(--blue);
    color               : var(--blue);
}

.inline-date.is-past {
    color : #b42318;
}

.inline-date-input {
    font      : inherit;
    padding   : 2px 4px;
    max-width : 150px;
}

/* Date columns sort by clicking the header (js/table-sort.js) */
th.th-date-sortable {
    cursor      : pointer;
    user-select : none;
    white-space : nowrap;
}

th.th-date-sortable:hover {
    color : var(--blue);
}

th.th-date-sortable::after {
    content     : ' \21C5';
    color       : #bbb;
    font-weight : normal;
}

th.th-date-sortable.sorted-asc::after {
    content : ' \25B2';
    color   : inherit;
}

th.th-date-sortable.sorted-desc::after {
    content : ' \25BC';
    color   : inherit;
}