/* Toheed Jewellers visual system — presentation only */
:root {
    --tj-ink: #27231f;
    --tj-muted: #766f65;
    --tj-paper: #faf8f4;
    --tj-white: #fff;
    --tj-wine: #541e2b;
    --tj-wine-deep: #36131d;
    --tj-gold: #b89554;
    --tj-gold-light: #d8c08e;
    --tj-line: #e9e3d9;
    --tj-shadow: 0 16px 40px rgba(43, 31, 21, .08);
}
html { scroll-behavior: smooth; }
body { margin: 0; margin-bottom: 0; background: var(--tj-paper); color: var(--tj-ink); font-family: 'Aptos', 'Segoe UI', sans-serif; line-height: 1.6; }
.container { max-width: 1320px; padding-left: 24px; padding-right: 24px; }
.brand-navbar { margin: 0 !important; min-height: 88px; padding: 12px clamp(16px, 4vw, 64px) !important; border-bottom: 1px solid var(--tj-line); box-shadow: 0 4px 24px rgba(43,31,21,.035) !important; }
.brand-navbar-inner { max-width: 1600px; margin: 0 auto; gap: 24px; }
.brand-navbar .navbar-brand img { height: 54px !important; max-width: 220px; object-fit: contain; }
.brand-navbar .navbar-nav { gap: clamp(2px, 1vw, 15px); align-items: center; }
.brand-navbar .nav-link, .brand-navbar .nav-link.btn { color: var(--tj-ink) !important; font-size: 12px; font-weight: 600 !important; letter-spacing: .075em; text-transform: uppercase; padding: 12px 9px !important; transition: color .2s ease; }
.brand-navbar .nav-link:hover, .brand-navbar .nav-link:focus { color: var(--tj-gold) !important; }
.brand-navbar .nav-link:after { transition: width .2s ease; }
.brand-navbar .brand-search { width: auto !important; max-width: 320px; margin: 0 0 0 10px !important; position: relative; }
.brand-search .form-control { min-width: 175px; border: 1px solid var(--tj-line); border-radius: 99px; background: #fbfaf8; padding: 10px 14px; font-size: 13px; }
.brand-search .btn { border: 0; border-radius: 99px; background: var(--tj-wine); padding: 9px 17px; font-size: 12px; letter-spacing: .04em; }
.brand-search .btn:hover, .btn-brand:hover { background: var(--tj-wine-deep); color: white; }
.navbar-toggler { border-color: var(--tj-line); }
#logoutForm { padding: 0 !important; }
.app-shell { min-height: calc(100vh - 88px); background: #f6f3ee; }
.app-sidebar { flex: 0 0 258px; width: 258px; min-height: calc(100vh - 88px); padding: 28px 18px !important; background: linear-gradient(165deg, #3b1721, #27131a) !important; border-right: 1px solid rgba(255,255,255,.08) !important; }
.app-sidebar h4 { color: #e2c98e !important; font: 500 19px/1.3 Georgia, serif; letter-spacing: .02em; padding: 5px 12px 18px; border-bottom: 1px solid rgba(216,192,142,.2); }
.app-sidebar nav { gap: 3px; }
.app-sidebar nav a { color: rgba(255,255,255,.78) !important; display: flex; align-items: center; min-height: 39px; padding: 9px 12px !important; border-radius: 7px; text-decoration: none; font-size: 13px; transition: background .2s ease,color .2s ease; }
.app-sidebar nav a:hover { color: #f0d99f !important; background: rgba(255,255,255,.08); }
.app-sidebar nav hr { border-color: rgba(255,255,255,.16); margin: 12px 8px; }
.app-sidebar nav span { color: #d8c08e !important; padding: 4px 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.app-main { min-width: 0; padding: clamp(20px, 3vw, 42px) !important; }
.app-main main { max-width: 1450px; margin: 0 auto; }
main h1, main h2, main h3 { color: var(--tj-ink); }
main h1, main h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; }
main h1 { font-size: clamp(28px, 3vw, 42px); }
main h2 { font-size: clamp(23px, 2.3vw, 32px); }
.card, .modal-content { border: 1px solid var(--tj-line); border-radius: 12px; box-shadow: 0 8px 26px rgba(43,31,21,.045); }
.card-header { border-bottom: 1px solid var(--tj-line); background: #f5f0e8; color: var(--tj-wine); font-weight: 600; }
.table { --bs-table-bg: transparent; vertical-align: middle; }
.table thead th { background: #f3eee5; color: #64594a; border-bottom-color: #e4dccf; font-size: 11px; letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .8rem .75rem; border-color: var(--tj-line); }
.table tbody tr:hover > * { background: #fbf7f0; }
.form-control, .form-select { border: 1px solid #ded7cc; border-radius: 7px; padding: .65rem .8rem; color: var(--tj-ink); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--tj-gold); box-shadow: 0 0 0 .2rem rgba(184,149,84,.16); }
.form-label { color: #554d44; font-size: 13px; font-weight: 600; }
.btn { border-radius: 6px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-dark, .btn-maroon, .btn-primary-theme { background-color: var(--tj-wine) !important; border-color: var(--tj-wine) !important; color: #fff !important; }
.btn-primary:hover, .btn-dark:hover, .btn-maroon:hover, .btn-primary-theme:hover { background-color: var(--tj-wine-deep) !important; border-color: var(--tj-wine-deep) !important; }
.btn-outline-primary { color: var(--tj-wine); border-color: var(--tj-wine); }
.btn-outline-primary:hover { background: var(--tj-wine); border-color: var(--tj-wine); }
.alert { border: 0; border-radius: 8px; }
.badge { font-weight: 600; letter-spacing: .02em; }
.breadcrumb { font-size: 13px; }
.footer { position: static; width: auto; line-height: 1.5; background: #f2eee7; color: var(--tj-muted) !important; padding: 24px 0; }
.footer a { color: var(--tj-wine); }

/* Homepage campaign and collection presentation */
.brand-hero { padding: 22px clamp(14px, 3vw, 46px) 0; }
.brand-carousel { height: clamp(460px, 67vh, 700px); max-width: 1600px; margin: auto; overflow: hidden; border-radius: 3px; background: #34272b; }
.brand-carousel .carousel-inner, .brand-carousel .carousel-item { height: 100%; }
.brand-carousel .carousel-item { position: relative; background-position: center 45%; background-size: cover; }
.brand-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,19,22,.73) 0%, rgba(30,19,22,.4) 44%, rgba(30,19,22,.04) 100%); }
.brand-hero-copy { position: absolute; left: clamp(34px, 10vw, 150px); top: 50%; transform: translateY(-50%); width: min(580px, 65%); color: white; }
.eyebrow { display: block; color: var(--tj-gold); font-size: 10px; font-weight: 700; letter-spacing: .2em; line-height: 1.5; }
.brand-hero-copy .eyebrow { color: #e8d4a7; }
.brand-hero-copy h1, .brand-hero-copy h2 { margin: 19px 0 15px; color: white; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(46px, 6.5vw, 83px); font-weight: 400; letter-spacing: -.045em; line-height: .99; }
.brand-hero-copy h1 em, .brand-hero-copy h2 em, .promise-copy h2 em { color: #e4cb92; font-weight: 400; }
.brand-hero-copy p { max-width: 430px; margin-bottom: 27px; color: rgba(255,255,255,.85); font-size: clamp(14px, 1.3vw, 17px); }
.btn-brand-light { padding: 12px 19px; color: white; border: 1px solid rgba(255,255,255,.75); border-radius: 2px; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.btn-brand-light:hover { border-color: white; color: var(--tj-wine); background: white; }
.hero-qr { position: absolute; right: 28px; bottom: 25px; display: grid; justify-items: center; gap: 5px; color: white; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hero-qr img { width: 76px; height: 76px; border: 5px solid white; border-radius: 2px; background: white; }
.brand-carousel-controls { position: absolute; z-index: 2; right: 34px; bottom: 38px; display: flex; align-items: center; gap: 12px; }
.brand-carousel-controls .carousel-control-prev, .brand-carousel-controls .carousel-control-next { position: static; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; opacity: .9; }
.hero-progress { width: 42px; height: 1px; background: rgba(255,255,255,.45); }
.hero-progress i { display: block; width: 55%; height: 1px; background: white; }
.brand-collections { padding-top: clamp(65px, 8vw, 110px); padding-bottom: clamp(65px, 8vw, 110px); }
.section-heading { margin: 0 auto 38px; text-align: center; }
.section-heading h2 { margin: 9px 0 8px; font-size: clamp(33px, 4vw, 48px); }
.section-heading p { margin: 0; color: var(--tj-muted); font-size: 14px; }
.collection-grid { max-width: 1170px; margin: 0 auto; }
.collection-card { display: block; color: var(--tj-ink); text-decoration: none; }
.collection-image { position: relative; overflow: hidden; height: clamp(260px, 31vw, 390px); background: #eee7db; }
.collection-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.collection-card:hover .collection-image img { transform: scale(1.045); }
.collection-arrow { position: absolute; right: 14px; bottom: 14px; display: grid; width: 38px; height: 38px; place-items: center; color: var(--tj-ink); background: rgba(255,255,255,.92); border-radius: 50%; font-size: 12px; }
.collection-caption { padding: 17px 2px 0; }
.collection-caption > span { color: var(--tj-gold); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.collection-caption h3 { margin: 5px 0 1px; font: 500 25px Georgia, 'Times New Roman', serif; }
.collection-caption p { margin: 0; color: var(--tj-muted); font-size: 12px; }
.brand-promise { padding: clamp(54px, 7vw, 96px) 0; background: var(--tj-wine-deep); color: white; }
.brand-promise .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1120px; }
.promise-copy { max-width: 600px; }
.promise-copy h2 { margin: 14px 0; color: white; font: 400 clamp(34px, 4vw, 52px)/1.12 Georgia, 'Times New Roman', serif; }
.promise-copy p { max-width: 520px; color: rgba(255,255,255,.7); font-size: 14px; }
.text-link { color: #e4cb92; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.text-link:hover { color: white; }
.promise-mark { display: flex; flex-direction: column; align-items: center; gap: 13px; color: #d8c08e; text-align: center; }
.promise-mark i { font-size: 72px; font-weight: 300; }
.promise-mark span { font-size: 9px; letter-spacing: .2em; line-height: 1.7; }
.ui-autocomplete { z-index: 1100; max-height: 260px; overflow-y: auto; border: 1px solid var(--tj-line); border-radius: 7px; background: white; box-shadow: var(--tj-shadow); }

@media (max-width: 1199.98px) {
    .brand-navbar-inner { gap: 8px; }
    .brand-navbar .navbar-nav { gap: 0; }
    .brand-navbar .nav-link { padding-inline: 6px !important; font-size: 11px; }
    .brand-navbar .brand-search { max-width: 250px; }
}
@media (max-width: 991.98px) {
    .brand-navbar { padding: 10px 18px !important; }
    .brand-navbar .navbar-collapse { padding: 12px 0 6px; }
    .brand-navbar .navbar-nav { align-items: stretch; }
    .brand-navbar .nav-link { padding: 9px 5px !important; }
    .brand-navbar .brand-search { max-width: none; margin: 8px 0 !important; }
    .brand-navbar .brand-search .form-control { flex: 1; }
    .app-sidebar { flex-basis: 225px; width: 225px; }
    .brand-carousel { height: 570px; }
}
@media (max-width: 767.98px) {
    .container { padding-left: 18px; padding-right: 18px; }
    .brand-navbar .navbar-brand img { height: 45px !important; }
    .app-shell { display: block !important; }
    .app-sidebar { width: 100%; min-height: 0; padding: 14px !important; }
    .app-sidebar h4 { padding: 4px 9px 10px; }
    .app-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; }
    .app-sidebar nav a { min-height: 35px; padding: 7px 9px !important; font-size: 12px; }
    .app-main { padding: 22px 15px !important; }
    .brand-hero { padding: 12px 12px 0; }
    .brand-carousel { height: min(72vh, 590px); min-height: 460px; }
    .brand-carousel .carousel-item { background-position: 59% center; }
    .brand-hero-shade { background: linear-gradient(90deg, rgba(30,19,22,.75), rgba(30,19,22,.34)); }
    .brand-hero-copy { left: 26px; width: calc(100% - 52px); }
    .brand-hero-copy h1, .brand-hero-copy h2 { font-size: clamp(44px, 12vw, 64px); }
    .hero-qr { right: 15px; bottom: 15px; }
    .hero-qr img { width: 54px; height: 54px; }
    .brand-carousel-controls { right: 14px; bottom: 23px; gap: 7px; }
    .brand-carousel-controls .carousel-control-prev, .brand-carousel-controls .carousel-control-next { width: 30px; height: 30px; }
    .hero-progress { width: 24px; }
    .brand-collections { padding-top: 58px; padding-bottom: 58px; }
    .collection-grid { max-width: 460px; }
    .collection-image { height: 340px; }
    .brand-promise .container { align-items: flex-start; }
    .promise-mark { display: none; }
}
@media (max-width: 480px) {
    .brand-carousel { min-height: 440px; }
    .hero-qr { display: none; }
    .brand-hero-copy p { max-width: 310px; }
    .collection-image { height: 280px; }
    .app-sidebar nav { grid-template-columns: 1fr; }
}
/* Compact desktop layout for the paper-bill entry workflow */
@media (min-width: 992px) {
    .compact-entry-main { padding: 8px 20px !important; min-width: 0; }
    .compact-entry-main > main { padding-bottom: 0 !important; }
    .bill-entry-page { display: flex; flex-direction: column; gap: 8px; }
    .bill-entry-heading { min-height: 48px; margin: 0 !important; }
    .bill-entry-heading h2 { margin: 0 0 2px; font-size: 27px; line-height: 1.15; }
    .bill-entry-heading p { font-size: 13px; line-height: 1.3; }
    .bill-entry-summary { margin: 0 !important; }
    .bill-entry-summary .card-header, .bill-entry-form > .card-header { padding: 8px 14px; font-size: 13px; }
    .bill-entry-summary .card-body { padding: 9px 13px; }
    .bill-entry-summary .data-summary-grid { gap: .65rem; }
    .bill-entry-summary .form-label { margin-bottom: 3px; font-size: 12px; }
    .bill-entry-summary .form-control, .bill-entry-summary .btn { min-height: 36px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
    .bill-entry-summary .fs-3 { font-size: 1.45rem !important; line-height: 1.1; }
    .bill-entry-summary .small { font-size: 11px !important; line-height: 1.2; }
    .bill-entry-form { margin: 0 !important; }
    .bill-entry-form .card-body { padding: 10px 13px; }
    .bill-entry-form .row { --bs-gutter-y: .4rem; }
    .bill-entry-form .form-label { margin-bottom: 2px; font-size: 11px; line-height: 1.15; }
    .bill-entry-form .form-control, .bill-entry-form .form-select { min-height: 34px; height: 34px; padding: 4px 9px; font-size: 13px; }
    .bill-entry-form .card-footer { padding: 7px 12px; }
    .bill-entry-form .card-footer .btn { padding: 6px 11px; font-size: 12px; }
    .compact-entry-main + .footer, body:has(.bill-entry-page) .footer { padding: 9px 0; font-size: 12px; }
}
@media (max-width: 991.98px) {
    .bill-entry-summary .data-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bill-entry-form .row > [class*="col-md-"] { width: 50%; }
}
@media (max-width: 575.98px) {
    .bill-entry-form .row > [class*="col-md-"] { width: 100%; }
    .bill-entry-heading { align-items: flex-start !important; gap: 12px; }
    .bill-entry-heading .btn { white-space: nowrap; font-size: 12px; }
}

/* One-screen staff calling workspace */
@media (min-width: 1200px) {
    .compact-workflow-main { padding: 8px 18px !important; min-width: 0; }
    .compact-workflow-main > main { padding-bottom: 0 !important; }
    body:has(.calling-page) .footer { display: none; }
    .calling-page { max-width: 1500px; padding-top: 0; }
    .calling-header { margin-bottom: 7px !important; }
    .calling-header > .d-flex:first-child { margin-bottom: 5px !important; }
    .calling-header h3 { font-size: 20px; line-height: 1.2; }
    .calling-header > .d-flex:nth-child(2) {
        display: grid !important;
        grid-template-columns: minmax(300px, 1.2fr) repeat(6, minmax(68px, .55fr)) minmax(185px, .9fr);
        align-items: end;
        gap: 6px !important;
    }
    .calling-date-filter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(105px, 1fr)) auto auto;
        align-items: end;
        gap: 5px !important;
        margin: 0 !important;
        min-width: 0;
    }
    .calling-date-filter > div { min-width: 0; }
    .calling-date-filter .form-label, .calling-search label { font-size: 11px; }
    .calling-date-filter input { height: 32px; padding: 4px 7px; font-size: 12px; }
    .calling-date-filter .btn, .calling-search .btn { height: 32px; padding: 4px 9px; font-size: 11px; }
    .call-stat { min-width: 0 !important; height: 42px; padding: 5px 7px !important; white-space: nowrap; }
    .call-stat small { display: block; overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; }
    .call-stat .fs-5 { font-size: 15px !important; line-height: 1.1; }
    .calling-search { display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 5px !important; min-width: 0; margin: 0 !important; }
    .calling-search > div { min-width: 0; width: 100%; }
    .calling-search input { height: 32px; min-width: 0; padding: 4px 8px; font-size: 11px; }
    .status-alert { margin: 5px 0 !important; padding: 6px 10px; font-size: 11px; }
    .compact-card { box-shadow: 0 2px 7px rgba(0,0,0,.07); }
    .compact-header { padding: 7px 12px; font-size: 12px; }
    .compact-body { padding: 8px 12px; }
    .customer-grid { --bs-gutter-y: .25rem !important; row-gap: 4px !important; }
    .customer-label { font-size: 10px; line-height: 1.1; }
    .customer-value { font-size: 12px; line-height: 1.15; }
    .customer-name, .customer-mobile { font-size: 15px; line-height: 1.15; }
    .assignment-alert { margin-top: 5px; padding: 5px 8px; font-size: 10px; }
    .section-divider { margin: 7px 0; }
    .mb-compact { margin-bottom: 5px !important; }
    .compact-body .row.g-3 { --bs-gutter-y: .35rem; }
    .action-title { margin-bottom: 3px !important; font-size: 10px; line-height: 1.1; }
    .compact-input { height: 30px; min-height: 30px; padding: 4px 8px; font-size: 11px; }
    .compact-textarea { height: 30px !important; min-height: 30px !important; padding: 4px 8px; font-size: 11px; }
    .compact-btn { padding: 5px 8px; font-size: 10px; }
    .whatsapp-btn, .email-btn { min-width: 92px; }
    .customer-mobile-info { margin-top: 4px !important; font-size: 10px; }
    .response-btn { padding: 5px 7px; font-size: 10px; }
    .footer-navigation { margin-top: 6px; }
    .nav-btn { min-width: 88px; padding: 5px 10px; font-size: 11px; }
}