/* ============================================================
   Across The Monde — app.css  (Global Admin/CMS/Dashboard Shared Styles)
   Phase 5B: extracted from site.css; common.css now holds the
   shared low-risk components (toast/scrollbar-track/pagination/
   tables/cards-base/form-control extras) loaded before this file.
   Primary: #1e3a5f  |  Accent: #e8a020
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
:root {

    --ff-head              : "Cormorant Garamond", Georgia, serif;
    --ff-body              : "DM Sans", system-ui, sans-serif;
                           
    --color-primary        : #1e3a5f;
    --color-primary-dark   : #142942;
    --color-primary-lite   : #2d558a;
    --color-secondary      : #e8a020;
    --color-secondary-dark : #c8881a;
    
    --color-white         : #ffffff;
    --color-text          : #2c3e50;
    --color-muted         : #6c757d;
    --color-border        : #e2e8f0;
    --color-bg            : #f4f6fa;
    --color-success       : #28a745;
    --color-danger        : #dc3545;
    --color-warning       : #ffc107;
    --color-info          : #17a2b8;
}

/*===============================
            Calendar
=================================*/
#ui-datepicker-div.ui-datepicker {padding: 0 !important;width: 300px !important;z-index:1060!important;border: none !important;border-radius: 6px !important;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;overflow: hidden !important;font-family:var(--ff-body) !important;background: #ffffff !important;}
#ui-datepicker-div .ui-datepicker-header {background: var(--color-primary) !important;border: none !important;border-radius: 0 !important;padding: 0 !important;height: 38px !important;position: relative !important;display: flex !important;align-items: center !important;}
/* Multi-month group radius */
#ui-datepicker-div .ui-datepicker-group-first .ui-datepicker-header {border-radius: 6px 0 0 0 !important;}
#ui-datepicker-div .ui-datepicker-group-last .ui-datepicker-header {border-radius: 0 6px 0 0 !important;}
#ui-datepicker-div:not(.ui-datepicker-multi) .ui-datepicker-header {border-radius: 6px 6px 0 0 !important;}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {position: absolute !important;top: 50% !important;transform: translateY(-50%) !important;width: 30px !important;height: 30px !important;border: none !important;background: transparent !important;border-radius: 4px !important;cursor: pointer !important;display: flex !important;align-items: center !important;justify-content: center !important;transition: background 0.15s !important;text-decoration: none !important;}
#ui-datepicker-div .ui-datepicker-prev {left: 4px !important;}
#ui-datepicker-div .ui-datepicker-next {right: 4px !important;left: auto !important;}
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover,
#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover {background: rgba(255, 255, 255, 0.18) !important;border: none !important;top: 50% !important;transform: translateY(-50%) !important;}
#ui-datepicker-div .ui-datepicker-prev-hover {left: 4px !important;}
#ui-datepicker-div .ui-datepicker-next-hover {right: 4px !important;left: auto !important;}
/* Hide default jQuery UI icon text, show as CSS arrow */
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon {background-image: none !important;text-indent: 0 !important;overflow: visible !important;width: 20px !important;height: 20px !important;display: flex !important;align-items: center !important;justify-content: center !important;font-size: 0 !important;position: static !important;margin: 0 !important;}
#ui-datepicker-div .ui-datepicker-prev .ui-icon::after {content: "\2039" !important;font-size: 24px !important;line-height: 1 !important;color: #ffffff !important;font-style: normal !important;font-weight: 400 !important;}
#ui-datepicker-div .ui-datepicker-next .ui-icon::after {content: "\203A" !important;font-size: 24px !important;line-height: 1 !important;color: #ffffff !important;font-style: normal !important;font-weight: 400 !important;}
#ui-datepicker-div .ui-datepicker-title {background: transparent !important;border: none !important;margin: 0 38px !important;padding: 0 !important;height: 38px !important;line-height: 38px !important;text-align: center !important;display: flex !important;align-items: center !important;justify-content: center !important;gap: 4px !important;flex: 1 !important;}
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-year {width: auto !important;margin: 0 !important;padding: 0 8px !important;background: transparent;color: #ffffff !important;font-size: 14px !important;font-weight: 500 !important;cursor: pointer !important;outline: none !important;letter-spacing: 0.01em !important;border: none;}
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-month option,
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-year option {background: #ffffff !important;color: #141823 !important;font-weight: 400 !important;}
/*CALENDAR TABLE */
#ui-datepicker-div table.ui-datepicker-calendar {width: 100% !important;border-collapse: collapse !important;margin: 0 !important;table-layout: fixed !important;background: #ffffff !important;}
#ui-datepicker-div table.ui-datepicker-calendar thead th {background-color: #f3f4f5 !important;color: #3d3e3e !important;font-size: 12px !important;font-weight: 700 !important;text-align: center !important;padding: 0 !important;height: 37px !important;border: none !important;border-bottom: 1px solid #e4e4e6 !important;vertical-align: middle !important;}
#ui-datepicker-div table.ui-datepicker-calendar thead th span {font-size: 12px !important;font-weight: 700 !important;color: inherit !important;}
/* Sunday th label — blue (first-child of tr) */
#ui-datepicker-div table.ui-datepicker-calendar thead th.ui-datepicker-week-end:first-child {color: #324388 !important;}
/* Saturday th label — keep dark (last-child) */
#ui-datepicker-div table.ui-datepicker-calendar thead th.ui-datepicker-week-end:last-child {color: #3d3e3e !important;}
#ui-datepicker-div table.ui-datepicker-calendar tbody td {height: 45px !important;width: auto !important;background: #ffffff !important;border:1px solid #ede7e7;padding: 0 !important;text-align: center !important;vertical-align: middle !important;}
/* Overflow / disabled cells (other month — no anchor inside) */
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-other-month {background: #fafafa !important;}
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-state-disabled {background: #fafafa !important;opacity: 1 !important;cursor: default !important;}

#ui-datepicker-div table.ui-datepicker-calendar tbody td a.ui-state-default {display: block !important;width: 100% !important;height: 45px !important;line-height: 45px !important;text-align: center !important;background: transparent !important;border: none !important;border-radius: 0 !important;color: #283540 !important;font-size: 13px !important;font-weight: 400 !important;margin: 0 !important;padding: 0 !important;text-decoration: none !important;transition: background 0.12s, color 0.12s !important;cursor: pointer !important;outline: none !important;box-shadow: none !important;}
/* Hover */
#ui-datepicker-div table.ui-datepicker-calendar tbody td a.ui-state-default:hover {background:var(--color-secondary) !important;color: #fff !important;border-radius: 4px !important;border: none !important;}
/* ui-state-hover class added by jQuery UI */
#ui-datepicker-div table.ui-datepicker-calendar tbody td a.ui-state-hover {background: #dce8ff !important;color: #0A39BB !important;border-radius: 4px !important;border: none !important;}
/* Sunday dates (first td in tr) — blue */
#ui-datepicker-div table.ui-datepicker-calendar tbody tr td.ui-datepicker-week-end:first-child a.ui-state-default {color:var(--color-primary) !important;font-weight: 600 !important;}
/* Saturday dates (last td in tr) — normal dark */
#ui-datepicker-div table.ui-datepicker-calendar tbody tr td.ui-datepicker-week-end:last-child a.ui-state-default {color: #283540 !important;font-weight: 400 !important;}
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-today a.ui-state-highlight,
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-today a.ui-state-default.ui-state-highlight {background:var(--color-secondary) !important;color: #ffffff !important;font-weight: 700 !important;border: none !important;border-radius: 4px !important;opacity: 1 !important;}
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-today a.ui-state-highlight:hover {background: var(--color-primary) !important;color: #ffffff !important;}
/* Today + selected at same time */
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-today.ui-datepicker-current-day a {background: #0D9F96 !important;color: #ffffff !important;}
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-current-day a.ui-state-default,
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-current-day a.ui-state-active {background: #0A39BB !important;color: #ffffff !important;font-weight: 700 !important;border-radius: 4px !important;border: none !important;}
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-current-day a:hover {background: #082fa0 !important;color: #ffffff !important;}

#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-datepicker-unselectable {cursor: default !important;opacity: 1 !important;}
/* Span used inside disabled cells instead of <a> */
#ui-datepicker-div table.ui-datepicker-calendar tbody td.ui-state-disabled span.ui-state-default {color: #d0d0d0 !important;background: transparent !important;display: block !important;width: 100% !important;height: 45px !important;line-height: 45px !important;text-align: center !important;font-size: 13px !important;cursor: default !important;}
#ui-datepicker-div.ui-datepicker-multi .ui-datepicker-group-first {border-right: 1px solid #ddd !important;}
#ui-datepicker-div.ui-datepicker-multi .ui-datepicker-group table {width: 100% !important;}
/* MultiFare cells */
#ui-datepicker-div.ui-datepicker-multi table.ui-datepicker-calendar tbody td {position: relative !important;border: 1px solid #ede7e7 !important;height: 44px !important;}
#ui-datepicker-div.ui-datepicker-multi table.ui-datepicker-calendar tbody td a.ui-state-default {padding: 4px 14px 16px 14px !important;height: auto !important;line-height: 1.4 !important;}
#ui-datepicker-div.ui-datepicker-multi table.ui-datepicker-calendar tbody td .farelblcls {position: absolute !important;bottom: 2px !important;left: 0 !important;font-size: 10px !important;font-weight: 500 !important;width: 100% !important;text-align: center !important;color: #017601 !important;padding: 0 !important;}
#ui-datepicker-div.ui-datepicker-multi table.ui-datepicker-calendar tbody td.ui-datepicker-current-day .farelblcls {color: #ffffff !important;}
#ui-datepicker-div.ui-datepicker-multi table.ui-datepicker-calendar tbody td:first-child {border-left: 0 !important;}
#ui-datepicker-div.ui-datepicker-multi table.ui-datepicker-calendar tbody td:last-child {border-right: 0 !important;}
#ui-datepicker-div table.ui-datepicker-calendar tbody td span.farelblcls {padding: 0 !important;}


* { box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--color-text); background: var(--color-bg); margin: 0; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }

/* =========================
        Login Page
========================= */
.__clsLogin .carousel{position:fixed;inset:0;overflow:hidden;}
.__clsLogin .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;}
.__clsLogin .slide.active{opacity:1;z-index:1;}
.__clsLogin .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 8s ease;}
.__clsLogin .slide.active img{transform:scale(1.12);}
.__clsLogin .overlay{position:fixed;inset:0;background:linear-gradient(120deg,rgba(5,15,35,.88),rgba(5,15,35,.55),rgba(5,15,35,.25));z-index:2;}
.__clsLogin .input-icon-wrap{position:relative;}
.__clsLogin header{position:absolute;top:35px;left:55px;right:55px;z-index:10;display:flex;justify-content:space-between;align-items:center;}
.__clsLogin .hero-content{position: absolute;left: 0;bottom: 70px;z-index: 10;animation: fadeUp 1.2s ease;padding: 80px 40px 96px;max-width: unset;}
.__clsLogin .hero-content span{display:block;color:#d4b06a;font-size:12px;letter-spacing:4px;margin-bottom:10px;}
.__clsLogin .hero-content h1{font-family:var(--ff-head);font-size:90px;line-height:1;color:#fff;}
.__clsLogin .hero-content p{margin-top:15px;color:#d5d8df;font-size:18px;}
.__clsLogin .hero-content span,.hero-content h1,.hero-content p{transition:all .5s ease;}
.__clsLogin .auth-divider{text-align: center;margin: 22px 0;position: relative;}
.__clsLogin .auth-divider::before,.__clsLogin .auth-divider::after {content: '';position: absolute;top: 50%;width: 42%;height: 1px;background: var(--color-border);}
.__clsLogin .auth-divider::before {left: 0;}
.__clsLogin .auth-divider::after {right: 0;}

@keyframes fadeUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}

.__clsLogin .auth-left-logo img{height:unset;width: auto;filter: brightness(0) invert(1);opacity: .92;}
.__clsLogin .login-card{width:33%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;padding:40px;border-radius:20px;background:rgba(13,28,56,.65);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 80px rgba(0,0,0,.45);}
@keyframes cardReveal{from{opacity:0;transform:translate(-50%,-42%);}to{opacity:1;transform:translate(-50%,-50%);}}
@keyframes floatCard{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,-52%);}}
.__clsLogin .welcome{text-align:center;color:#d4b06a;font-size:12px;letter-spacing:4px;margin:15px 0px;}
.__clsLogin .login-card h2{text-align:center;font-family:'Playfair Display',serif;font-size:26px;}
.__clsLogin .sub{text-align:center;color:#bcc4d3;margin-top:12px;margin-bottom:28px;}
.__clsLogin .auth-divider span{padding: 0 10px;font-size: 13px;color: #98a4bb;font-weight: 600;letter-spacing: 1px;background:transparent;}
.__clsLogin #remember-me{position:relative;top:-3px;}
.__clsLogin .input-icon {position: absolute;left: 19px;top: 50%;transform: translateY(-50%);color: var(--color-muted);font-size: 15px;pointer-events: none;}
.__clsLogin .toggle-pw-btn {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);background: none;border: none;color: var(--color-muted);cursor: pointer;padding: 4px;font-size: 15px;line-height: 1;}
.__clsLogin .toggle-pw-btn:hover{color:var(--color-secondary);}

.__clsLogin .input-group{margin-bottom:18px;display:block;}
.__clsLogin .input-group label{display:block;margin-bottom:10px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#c7d0de;}
.__clsLogin .label-row{display:flex;justify-content:space-between;}
.__clsLogin .label-row a{color:#d4b06a;text-decoration:none;font-size:13px;}
.__clsLogin input.atm-form-control{width: 100%;height: 54px;caret-color: #ffffff;outline: none;border-radius:20px !important;padding: 0 45px;color: #fff !important;background: rgba(255, 255, 255, .08);border: 1px solid rgba(255, 255, 255, .08);}
.__clsLogin input.atm-form-control::placeholder{color:#aeb8c7;}
.__clsLogin .login-btn{width:100%;height:56px;margin-top:10px;border:none;border-radius:16px;background:#d4b06a;color:#091526;font-weight:700;letter-spacing:3px;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;gap:10px;}
.__clsLogin .login-btn:hover{transform:translateY(-2px);}
.__clsLogin .login-btn:disabled,
.__clsLogin .login-btn.loading {opacity: 0.9 !important;cursor: not-allowed !important;transform: none !important;background: #c29e59 !important;color: #091526 !important;}
.atm-btn-spinner-icon {font-size: 20px !important;line-height: 1 !important;display: inline-block !important;animation: atmSpin 0.8s linear infinite !important;}
@keyframes atmSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.__clsLogin .signup{text-align:center;margin-top:22px;color:#c4cad6;}
.__clsLogin .signup a{color:#d4b06a;text-decoration:none;margin-left:5px;letter-spacing:1px;}

.__clsLogin input:-webkit-autofill,
.__clsLogin input:-webkit-autofill:hover,
.__clsLogin input:-webkit-autofill:focus,
.__clsLogin input:-webkit-autofill:active {-webkit-text-fill-color: #ffffff !important;caret-color: #ffffff !important;-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;border: 1px solid rgba(255, 255, 255, 0.1) !important;transition: background-color 5000s ease-in-out 0s;}

.__clsDanger{font-size: 6px;position: relative;top: -5px;color: #e13636;}
.input-error-focus {border: 1px solid #ff7a87 !important;box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, .25) !important;}
.atm-form-control.input-error-focus:focus {border-color: #dc3545 !important;box-shadow: 0 0 0 3px rgba(220,53,69,.15) !important;}

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar {
    position: fixed; top: 0; left: 0;
    width:260px; height: 100vh;
    background:#091939; overflow-y: auto;
    z-index: 1040; transition: transform .3s ease;
    display: flex; flex-direction: column;transition: transform .28s cubic-bezier(.4,0,.2,1);
    font-family:var(--ff-body);
}

#sidebar .clsloginlogo img{width: 100%;padding:10px 20px 10px;border-bottom:1px solid #f5f5f540;}
#sidebar .sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: #fff;
}
#sidebar .sidebar-brand img { width: 36px; height: 36px; border-radius: 6px; }
#sidebar .sidebar-brand span { font-size: 16px; font-weight: 600; letter-spacing: .3px; }
#sidebar .sidebar-brand small { font-size: 10px; color: rgba(255,255,255,.55); display: block; margin-top: 1px; }

#sidebar .nav-section-title {
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: #9d9d9d; padding: 12px 20px 6px;
}
#sidebar .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 20px; color: rgba(255,255,255,.75);
    text-decoration: none; font-size: 13.5px; border-radius: 0;
   
}
#sidebar .nav-link i { font-size: 16px; width: 20px; flex-shrink: 0; }
#sidebar .nav-link img.__clsTopImg{position: absolute;
    right: -4px;
    width: 15px;
    top: -8px;}
#sidebar .nav-link img.__clsBottomImg{position: absolute;
    right: -4px;
    width: 18px;
    bottom: -13px;
    transform: rotate(269deg);}
#sidebar .nav-link img{display:none;}
#sidebar .nav-link.active img{display:block;}
#sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
#sidebar .nav-link.active { background: #f4f6fa; color: #091939;border-radius:35px 0px 0px 35px;font-weight:600;}
#sidebar .nav-link .badge-pill {
    margin-left: auto; background: rgba(255,255,255,.2);
    font-size: 10px; padding: 2px 7px; border-radius: 12px;
}
#sidebar .sidebar-footer {
        display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s;
    justify-content: space-between;
    width: 225px;
    margin: 0 auto 15px auto;
}
#sidebar .sidebar-footer .__clsFlexFooter{display:flex;justify-content:center;align-items:center;gap:10px;}
#sidebar .sidebar-footer:hover {
    background: rgba(255, 255, 255, 0.12);
}
#sidebar .sidebar-footer .user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#sidebar .sidebar-footer .user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#sidebar .sidebar-footer .user-name {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
}

#sidebar .sidebar-footer .user-role {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
    margin-bottom:4px;
}

#sidebar .sidebar-footer .chevron-icon {
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
    margin-left: 4px;
}
#sidebar .__clsSideMenuContent::-webkit-scrollbar {width:0.00001px;}
#sidebar .__clsSideMenuContent::-webkit-scrollbar-track {box-shadow: none;background:none;}
#sidebar .__clsSideMenuContent::-webkit-scrollbar-thumb {background-color:transparent;border-radius: 50px;transition: all 0.4s ease 0s;opacity:1;display:block;}
#sidebar .__clsSideMenuContent:hover::-webkit-scrollbar-thumb  {background-color:transparent;}


/* ── Topbar ─────────────────────────────────────────────────── */
#topbar {
    position: fixed; top: 0; left: 260px;
    right: 0; height: 60px;
    background: var(--color-white); border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; padding: 0 24px;
    gap: 12px; z-index: 1030; box-shadow: 0 2px 10px rgba(0,0,0,.08);font-family:var(--ff-body);
}
#topbar .page-title { font-size: 16px; font-weight: 600; color: var(--color-primary); margin-right: auto; }
#topbar .topbar-icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-muted); background: transparent; border: none; cursor: pointer; transition: background .2s;
    position: relative;border:1.5px solid #dde0f8;
}
#topbar .topbar-icon-btn i{font-size:15px;color:var(--color-primary-dark);}
#topbar .topbar-icon-btn:hover { background: var(--color-bg); color: var(--color-primary); }
#topbar .topbar-icon-btn .badge-dot {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; background: var(--color-danger); border-radius: 50%;
    border: 2px solid #fff;
}
#topbar .user-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 20px; cursor: pointer;
    transition: background .2s; text-decoration: none;
}
#topbar .user-chip:hover { background: var(--color-bg); }
#topbar .user-chip .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-secondary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
#topbar .user-chip .user-name { font-size: 13px; font-weight: 500; color: var(--color-text); }
#topbar .user-chip .user-role { font-size: 11px; color: var(--color-muted); }

/* ── Main content ───────────────────────────────────────────── */
#main-content {
    margin-left: 260px;
    padding-top: 60px;
    min-height: 100vh;
    font-family:var(--ff-body);
}
.page-content { padding: 24px; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.atm-breadcrumb { font-size: 12px; color: var(--color-muted); margin-bottom: 6px; }
.atm-breadcrumb a { color: var(--color-primary); text-decoration: none; }
.atm-breadcrumb a:hover { text-decoration: underline; }

/* ── Cards ──────────────────────────────────────────────────── */






/* ── Stat Tiles ─────────────────────────────────────────────── */
.stat-tile {
    background: var(--color-white); border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: 20px 22px;
    display: flex; align-items: center; gap: 16px;
    border: 1px solid var(--color-border); transition: transform .2s, box-shadow .2s;height:100%;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.stat-tile .tile-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.stat-tile .tile-label { font-size: 10px; color: var(--color-muted); margin-bottom: 3px; }
.stat-tile .tile-value { font-size: 20px; font-weight: 700; color:var(--color-primary-dark); line-height: 1; }
.stat-tile .tile-sub { font-size: 11px; color: var(--color-muted); margin-top: 4px; }
/* Fix 2B: tile-text wrapper — fills remaining width, prevents flex overflow,
   and keeps label/value stacked with consistent vertical centering */
.stat-tile .tile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive: tighter padding and smaller value font on col-6 mobile cards */
@media (max-width: 767px) {
    .stat-tile { padding: 14px 14px; gap: 12px; }
    .stat-tile .tile-value { font-size: 18px; }
    .stat-tile .tile-icon { width: 40px; height: 40px; font-size: 18px; }
}
@media (max-width: 480px) {
    .stat-tile { padding: 12px 10px; gap: 10px; }
    .stat-tile .tile-value { font-size: 16px; }
    .stat-tile .tile-label { font-size: 11px; }
    .stat-tile .tile-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 8px; }
}
.stat-tile .tile-icon.bg-primary-soft { background: rgba(30,58,95,.1); color: var(--color-primary); }
.stat-tile .tile-icon.bg-success-soft  { background: rgba(40,167,69,.1); color: var(--color-success); }
.stat-tile .tile-icon.bg-warning-soft  { background: rgba(232,160,32,.12); color: var(--color-secondary); }
.stat-tile .tile-icon.bg-danger-soft   { background: rgba(220,53,69,.1); color: var(--color-danger); }
.stat-tile .tile-icon.bg-info-soft     { background: rgba(23,162,184,.1); color: var(--color-info); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-atm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 8px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    border: none; transition: background .2s, transform .1s; text-decoration: none;
}
.btn-atm:active { transform: scale(.98); }
.btn-atm-primary { background: var(--color-primary); color: #fff; }
.btn-atm-primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn-atm-accent  { background: var(--color-secondary); color: #fff; }
.btn-atm-accent:hover  { background: var(--color-secondary-dark); color: #fff; }
.btn-atm-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-atm-outline:hover { background: var(--color-primary); color: #fff; }
.btn-atm-danger  { background: var(--color-danger); color: #fff; }
.btn-atm-danger:hover  { background: #b02a37; color: #fff; }
.btn-atm-sm { padding: 5px 12px; font-size: 12px; }
.btn-atm-icon { padding: 6px; width: 32px; height: 32px; justify-content: center; border-radius: 6px; }

/* ── Forms ──────────────────────────────────────────────────── */

.atm-form-control {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--color-border);
    border-radius: 8px; font-size: 13.5px; background: #fff;
    color: var(--color-text); transition: border-color .2s, box-shadow .2s; outline: none;
}



/* ── Search bar ─────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.search-wrap input { padding-left: 34px; }

/* ── Pagination ─────────────────────────────────────────────── */







/* Responsive: hide number labels on very small screens, keep prev/next */


/* ── Modal ──────────────────────────────────────────────────── */
.atm-modal-header { background: var(--color-primary); color: #fff; border-radius: 14px 14px 0 0; padding: 16px 20px; }
.atm-modal-header .btn-close { filter: invert(1) brightness(2); }

/* ── Toast ──────────────────────────────────────────────────── */
#atm-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.atm-toast {
    min-width: 280px; padding: 12px 16px; border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12); display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; font-weight: 500; animation: slideInRight .3s ease;
}




@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Loader overlay ─────────────────────────────────────────── */
#atm-loader {
    display: none; position: fixed; inset: 0;
    background: rgba(255,255,255,.65); z-index: 9990;
    align-items: center; justify-content: center;
}
#atm-loader.show { display: flex; }
.atm-spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.open { transform: translateX(0); }
    #topbar { left: 0; }
    #main-content { margin-left: 0; }
    .sidebar-overlay { display: block !important; }
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }

/* ── Utility ────────────────────────────────────────────────── */
.fw-600 { font-weight: 600; }
.text-primary-atm { color: var(--color-primary); }
.text-accent { color: var(--color-secondary); }
.bg-primary-atm { background: var(--color-primary); }
.gap-2 { gap: 8px; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 12px; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--color-muted); }
.empty-state i { font-size: 48px; opacity: .3; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   POPUP / TOAST CENTERING  (Req 10)
   ═══════════════════════════════════════════════════════════ */
#atm-toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: max-content;
    max-width: 90vw;
    justify-content:center;
}
.atm-toast {
    pointer-events: all;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px 14px 18px;
    border-radius: 14px;
    font-family: var(--ff-body);
    font-size: 14px; font-weight: 600;
    box-shadow: 0 8px 40px rgba(0,0,0,.28);
    animation: toastIn .25s ease;
    min-width: 280px; max-width: 480px;
    position: relative;
}
.atm-toast.danger{background: #1a233a;
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, .25);}


.atm-toast-close {
    background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; opacity: .6;
    padding: 0 0 0 8px; flex-shrink: 0; transition: opacity .2s;
    color: inherit;
}

@keyframes toastIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }





/* Confirm modal centering */
.modal-dialog-centered { margin: auto; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Admin  (Req 9)
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --color-bg:       #0e1117;
    --color-surface:  #161b22;
    --color-border:   #30363d;
    --color-text:     #e6edf3;
    --color-muted:    #8b949e;
    --color-sidebar:  #0d1117;
    --color-topbar:   #161b22;
    color-scheme: dark;
}
[data-theme="dark"] body            { background: var(--color-bg); color: var(--color-text); }
[data-theme="dark"] #sidebar        { background: var(--color-sidebar); border-right-color: var(--color-border); }
[data-theme="dark"] #topbar         { background: var(--color-topbar); border-bottom-color: var(--color-border); }




[data-theme="dark"] .nav-link        { color: var(--color-muted) !important; }
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active { color: #fff !important; background: rgba(255,255,255,.07) !important;border-radius:35px !important}
[data-theme="dark"] .nav-link.active .curve-top.clsBottom, [data-theme="dark"] .nav-link.active .curve-top {display:none !important;}
[data-theme="dark"] .nav-section-title{ color: var(--color-muted); }
[data-theme="dark"] .page-title      { color: var(--color-text); }
[data-theme="dark"] table            { color: var(--color-text); }
[data-theme="dark"] .table           { --bs-table-bg: var(--color-surface); --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); }
[data-theme="dark"] .dropdown-menu  { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .dropdown-item  { color: var(--color-text); }
[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .modal-content  { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer   { border-color: var(--color-border); }
[data-theme="dark"] .fw-600, [data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--color-text); }
[data-theme="dark"] .text-muted      { color: var(--color-muted) !important; }
[data-theme="dark"] .border, [data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top      { border-color: var(--color-border) !important; }
[data-theme="dark"] .btn-atm-outline { border-color: var(--color-border); color: var(--color-text); background: transparent; }
[data-theme="dark"] .btn-atm-outline:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] input[type=color]{ background: var(--color-surface); }
[data-theme="dark"] .atm-toast.success { background:#1a3a2a; }
[data-theme="dark"] .atm-toast.error   { background:#3a1a1a; }

/* ═══════════════════════════════════════════════════════════
   UI MODERNISATION ADDITIONS — site.css
   Animations, improved cards, better tables, KPI tiles
   ═══════════════════════════════════════════════════════════ */

/* ── Page-entry fade-in ── */
@keyframes atmFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes atmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#main-content { animation: atmFadeIn .35s ease; }

/* ── Enhanced Cards ── */








/* ── KPI / Stat Tiles ── */
.stat-tile {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 14px;
    border: 1px solid var(--color-border);
    padding:18px 0px 18px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .2s, transform .2s;
    animation: atmFadeUp .4s ease both;overflow:hidden;
}
.stat-tile:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); transform: translateY(-2px); }

.tile-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tile-icon i { font-size: 16px; }

.bg-primary-soft { background: rgba(30,58,95,.1);  color: var(--color-primary); }
.bg-success-soft { background: rgba(40,167,69,.1); color: #1a6e2e; }
.bg-warning-soft { background: rgba(232,160,32,.12); color: #9a6200; }
.bg-info-soft    { background: rgba(23,162,184,.1); color: #0e6c7c; }
.bg-danger-soft  { background: rgba(220,53,69,.1);  color: #a01323; }

.tile-label { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 3px; }
.tile-value { font-size: 24px; font-weight: 700; color: var(--color-primary); line-height: 1.1; }

/* ── Improved Tables ── */
.__clsTables .table-responsive{max-height:385px;height:auto;}
.__clsTables .table-responsive.__clsPackage {max-height: 460px;height: auto;}
.__clsTablePagination{display:flex;justify-content:space-between;align-items:center;padding:8px;border-top:1px solid var(--color-border);background:#fafbfc;}

/* ── Status badges ── */
.badge-status {display: inline-flex; align-items: center; gap: 4px;padding: 3px 10px; border-radius: 100px;font-size: 11px; font-weight: 600; letter-spacing: .02em;white-space: nowrap;}
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;}
.badge-status.confirmed  { background: #effff3;color: #1a6e2e;}
.badge-status.pending    { background: #fffbf2;color: #7a5000;}
.badge-status.cancelled  { background: #ffebee;color: #8b1524;}
.badge-status.completed  { background: #eefdff;color: #0b5e6a;}
.badge-status.draft      { background: #e3e3e3;color: #495057;}
.badge-status.published  { background: #eaffef;color: #1a6e2e;}
.badge-status.new        { background: #eff1ff;color: #2338CC;}
.badge-status.paid      { background: #d4edda; color: #155724; }
.badge-status.partial   { background: #fff3cd; color: #856404; }
.badge-status.unpaid    { background: #f8d7da; color: #721c24; }
.badge-status.quoted    { background: #e2d9f3; color: #4a148c; }

/* ── Improved Form Controls ── */
.atm-form-control {
    transition: border-color .2s, box-shadow .2s;
    border-radius: 8px !important;
}


/* ── Buttons: improved hover/active ── */
.btn-atm {
    transition: background .2s, box-shadow .15s, transform .1s;
    border-radius: 8px !important;
}
.btn-atm:hover { box-shadow: 0 3px 12px rgba(0,0,0,.15); }
.btn-atm:active { transform: scale(.98); }
.btn-atm-primary:hover { background: var(--color-primary-dark); }

/* ── Sidebar nav link active indicator ── */
#sidebar .nav-link {
    position: relative;
    border-radius: 8px;
    margin: 1px 8px;
    margin-right:0px;
    overflow:visible;
    background:transparent;z-index:1;
}

#sidebar .nav-link .curve-container {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  will-change: opacity; /* promote to its own compositor layer */
}

#sidebar .nav-link.active .curve-container {
  opacity: 1;
}
#sidebar .nav-link .curve-top  {
    position: absolute;
    right: -1px;
    bottom: 100%;
    width: 20px;
    height: 20px;
    overflow: hidden;
    transform: rotate(90deg);}
#sidebar .nav-link .curve-top.clsBottom {position: absolute;
    right: -1px;
    bottom: -18px;
    width: 20px;
    height: 20px;
    overflow: hidden;
    transform:rotate(0deg);}

#sidebar .nav-link::after:hover{background:transparent;}

/* ── Topbar: subtle bottom-shadow on scroll ── */
#topbar { transition: box-shadow .3s; }
#topbar.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.1); }

/* ── Modal improvements ── */
.modal-content {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
}
.modal.fade .modal-dialog {
    transform: translateY(-20px) scale(.97);
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
}
.modal.show .modal-dialog {
    transform: none;
}

/* ── Row stagger animation for table rows ── */








/* ── Empty state ── */
.empty-state { animation: atmFadeIn .4s ease .1s both; }
.empty-state i { display: block; }

/* ── Date input: fix calendar icon ── */


/* ── Scrollbar refinement ── */
::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-thumb { background: #d0d4e0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a8aec4; }

/* ── Topbar scroll-shadow JS hook ── */

/* ── Pagination dark mode ───────────────────────────────────── */




/* ── Quick action accent text ───────────────────────────────── */
.text-accent { color: var(--color-secondary) !important; }
.fw-600 { font-weight: 600 !important; }

.__clsSideMenuContent {
    height: 100vh;
    overflow-y: auto;
}
/* ============================================================
   MERGED FROM site-improvements.css — Phase 8 CSS Consolidation
   ============================================================ */
/* ============================================================
   site-improvements.css
   Across The Monde — Additional Global UI Improvements
   Include AFTER site.css in _Layout.cshtml
   ============================================================ */

/* ── Search input wrapper ──────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap .search-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted); pointer-events: none; font-size: 13px;
}


/* ── Improved Pagination ───────────────────────────────────── */






/* ── Improved Summary Row (Booking Detail) ─────────────────── */
.summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 13px;
    border-bottom: 1px solid var(--color-border);
}
.summary-row:last-child { border-bottom: none; }
.summary-total {
    font-size: 16px; font-weight: 700; padding-top: 10px;
}

/* ── Detail Field ──────────────────────────────────────────── */
.detail-field { margin-bottom: 12px; }
.detail-field .atm-form-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .8px; margin-bottom: 3px;
    color: var(--color-muted);
}
.detail-field > div {
    font-size: 14px; font-weight: 500; color: var(--color-primary);
}

/* ── Finance Summary ───────────────────────────────────────── */
.fin-summary-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 14px;
    padding: 20px;
    color: #fff;
}
.fin-summary-card .fin-row {
    display: flex; justify-content: space-between;
    padding: 6px 0; font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.fin-summary-card .fin-row:last-child { border-bottom: none; }
.fin-summary-card .fin-total {
    font-size: 18px; font-weight: 700; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.2);
    margin-top: 4px;
}
.fin-summary-card .fin-label { opacity: .75; }
.fin-summary-card .fin-value { font-weight: 600; }
.fin-outstanding { color: #ffcc80 !important; }

/* ── Booking Status Steps (booking detail) ─────────────────── */
.booking-status-steps {
    display: flex; align-items: center; gap: 0;
    padding: 16px 0 8px; overflow-x: auto;
    scrollbar-width: none;
}
.booking-status-steps::-webkit-scrollbar { display: none; }
.bk-step {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; flex-shrink: 0; min-width: 80px;
}
.bk-step-circle {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: #eef0f5; color: #aaa;
    border: 2px solid #dde0e8;
    transition: all .3s;
}
.bk-step.done .bk-step-circle {
    background: var(--color-success); border-color: var(--color-success); color: #fff;
}
.bk-step.active .bk-step-circle {
    background: var(--color-secondary); border-color: var(--color-secondary); color: #fff;
}
.bk-step-label { font-size: 11px; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.bk-step.done .bk-step-label, .bk-step.active .bk-step-label { color: var(--color-primary); }
.bk-step-line { flex: 1; height: 2px; background: #dde0e8; min-width: 20px; margin-bottom: 18px; }
.bk-step-line.done { background: var(--color-success); }

/* ── CRM Pipeline board ────────────────────────────────────── */
.pipeline-board {
    display: flex; gap: 12px;
    overflow-x: auto; padding-bottom: 8px;
    min-height: 480px; align-items: flex-start;
}
.pipeline-col {
    flex-shrink: 0; width: 220px;
    background: #f4f6fa; border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.pipeline-col-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; font-size: 13px; font-weight: 600;
    color: var(--color-primary); border-bottom: 2px solid var(--color-border);
    background: #fff;
}
.pipeline-col-converted .pipeline-col-header { border-bottom-color: var(--color-success); }
.pipeline-col-lost .pipeline-col-header { border-bottom-color: var(--color-danger); }
.col-count {
    margin-left: auto; background: var(--color-border);
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 12px;
}
.converted-count { background: rgba(40,167,69,.15); color: #1a6e2e; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.new-dot { background: #3B4FE4; }
.contacted-dot { background: var(--color-secondary); }
.quoted-dot { background: #6f42c1; }
.negotiating-dot { background: #fd7e14; }
.converted-dot { background: var(--color-success); }
.lost-dot { background: var(--color-danger); }
.pipeline-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.pipeline-card {
    background: #fff; border-radius: 8px;
    border: 1px solid var(--color-border);
    padding: 12px; font-size: 12px;
    transition: box-shadow .2s, transform .15s;
    cursor: grab;
}
.pipeline-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px); }
.pipeline-card-name { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: 4px; }
.pipeline-card-meta { color: var(--color-muted); display: flex; flex-direction: column; gap: 2px; }

/* ── Report page improvements ──────────────────────────────── */
.report-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.report-kpi {
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: 14px; padding: 16px;
    text-align: center;
}
.report-kpi .rk-val { font-size: 22px; font-weight: 700; color: var(--color-primary); }
.report-kpi .rk-label { font-size: 11px; color: var(--color-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Kanban drag-over indicator ─────────────────────────────── */
.pipeline-col.drag-over { background: rgba(30,58,95,.05); border-color: var(--color-primary); }

/* ── Improved nav active indicator (add to sidebar JS) ────── */
@media (max-width: 991px) {
    .pipeline-col { width: 180px; }
    .pipeline-board { gap: 8px; }
}

/* ── Package card grid ──────────────────────────────────────── */
.pkg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.pkg-card {
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: 14px; overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.pkg-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); transform: translateY(-2px); }
.pkg-card-img { height: 160px; overflow: hidden; background: #eee; }
.pkg-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pkg-card:hover .pkg-card-img img { transform: scale(1.04); }
.pkg-card-body { padding: 16px; }
.pkg-card-title { font-size: 14px; font-weight: 600; color: var(--color-primary); margin-bottom: 4px; }
.pkg-card-dest { font-size: 12px; color: var(--color-muted); }
.pkg-card-footer {
    padding: 12px 16px; border-top: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between;
}
.pkg-card-price { font-size: 16px; font-weight: 700; color: var(--color-secondary); }

/* ── Dark mode additions ─────────────────────────────────────── */
[data-theme="dark"] .fin-summary-card { background: linear-gradient(135deg, #1a2e4a 0%, #0f1e30 100%); }
[data-theme="dark"] .pipeline-col { background: rgba(255,255,255,.04); }
[data-theme="dark"] .pipeline-col-header { background: rgba(255,255,255,.06); }
[data-theme="dark"] .pipeline-card { background: rgba(255,255,255,.06); }
[data-theme="dark"] .pkg-card { background: rgba(255,255,255,.05); }

/* ============================================================
   Phase 5B.5: moved back from common.css — these are admin-only
   component families (never matched by any public-facing markup,
   confirmed by selector-usage search) that were duplicated only
   within the old site.css, not genuinely shared with public.css.
   Belongs in app.css, not common.css.
   ============================================================ */

/* ── Pagination ──────────────────────────────────────── */
.atm-pagination {
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.atm-pagination .page-btn {
    min-width: 36px; height: 36px; border-radius: 8px;
    border: 1.5px solid var(--color-border);
    background: var(--color-white); color: var(--color-text);
    font-size: 13px; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px; transition: all .18s; user-select: none;
    text-decoration: none; white-space: nowrap;
}
.atm-pagination .page-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff; font-weight: 700;
    box-shadow: 0 3px 10px rgba(30,58,95,.3);
}
.atm-pagination .page-btn.page-ellipsis {
    border-color: transparent; background: transparent; cursor: default;
    color: var(--color-muted); font-size: 16px; letter-spacing: .05em; pointer-events: none;
}
.atm-pagination .page-btn.page-nav { font-size: 12px; font-weight: 600; padding: 0 12px; }
.atm-pagination .page-btn:disabled,
.atm-pagination .page-btn.disabled {
    opacity: .35; cursor: not-allowed; pointer-events: none;
}
.atm-pagination .page-btn:hover:not(.active):not(:disabled) {
    background: var(--color-bg); border-color: var(--color-primary-lite); color: var(--color-primary);
}
.atm-pagination .page-btn:hover:not(.active):not([disabled]) {
    background: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(30,58,95,.1);
}
.atm-pagination .page-btn[disabled] {
    opacity: .35; cursor: not-allowed; pointer-events: none;
}
@media (max-width: 480px) {
    .atm-pagination .page-btn { min-width: 30px; height: 30px; font-size: 12px; padding: 0 8px; }
    .atm-pagination .page-btn.page-num-hide { display: none; }
}
[data-theme="dark"] .atm-pagination .page-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .atm-pagination .page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .atm-pagination .page-btn:hover:not(.active):not(:disabled) { background: var(--color-bg); }

/* ── Tables ──────────────────────────────────────────── */
.atm-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.atm-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    transition: background .15s;
}
.atm-table tbody tr {
    animation: atmFadeUp .3s ease both;
}
.atm-table tbody tr:hover { background: #fafbfd; }
.atm-table tbody tr:hover td { background: rgba(30,58,95,.025); }
.atm-table tbody tr:last-child td { border-bottom: none; }
.atm-table tbody tr:nth-child(1) { animation-delay: .04s; }
.atm-table tbody tr:nth-child(2) { animation-delay: .08s; }
.atm-table tbody tr:nth-child(3) { animation-delay: .12s; }
.atm-table tbody tr:nth-child(4) { animation-delay: .16s; }
.atm-table tbody tr:nth-child(5) { animation-delay: .2s; }
.atm-table tbody tr:nth-child(n/**/+6) { animation-delay: .22s; }
.atm-table td { padding: 11px 14px; border-bottom: 1px solid #f0f4f8; vertical-align: middle; font-size: 13px; }
.atm-table th {
    background: #f8fafc; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted);
    padding: 10px 14px; border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}
.atm-table thead th {
    padding: 11px 16px;
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-muted);
    background: #fafbfc; white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.atm-table thead tr { border-bottom: 2px solid var(--color-border); }
.atm-table #recent-bookings-tbody td{padding:12px 0px 12px 16px;}
.atm-table #recent-bookings-tbody td a.btn-atm{margin-right:10px;}

/* ── Cards (base) ────────────────────────────────────── */
.atm-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .25s, transform .2s;
    overflow: hidden;
}
.atm-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: #fafbfc;position:relative;
}
.atm-card-header h5 {
    font-size: 14px; font-weight: 600;
    color: var(--color-primary); margin: 0;
}
.atm-card-body { padding: 20px; }
.atm-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.atm-card-body.p-0 { padding: 0; }
.atm-card-header .ms-auto { margin-left: auto; }
[data-theme="dark"] .atm-card       { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .atm-card-header{ background: var(--color-sidebar); border-bottom-color: var(--color-border); }

/* ── Form controls ───────────────────────────────────── */
.atm-form-control:focus {
    border-color: var(--color-primary-lite) !important;
    box-shadow: 0 0 0 3px rgba(30,58,95,.1) !important;
}
.atm-form-control.is-invalid { border-color: var(--color-danger); }
.atm-form-label { font-size: 12px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; display: block; }
[data-theme="dark"] .atm-form-control{ background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .atm-form-control:focus{ border-color: var(--color-secondary); background: var(--color-surface); }
input[type="date"].atm-form-control {
    color-scheme: light;
}
.search-wrap .atm-form-control { padding-left: 36px; }


/* ============================================================
   Phase 5C: merged from package.css (file eliminated, content
   relocated here verbatim, byte-for-byte, per approved
   migration plan — Admin/CMS/Dashboard/Finance/CRM grouping)
   ============================================================ */

/* package.css */
.pkg-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border); transition: box-shadow .2s, transform .2s; height: 100%; }
.pkg-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.pkg-card-img { position: relative; height: 160px; overflow: hidden; background: #eee; }
.pkg-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pkg-card:hover .pkg-card-img img { transform: scale(1.05); }
.pkg-badge { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.status-published { background: rgba(40,167,69,.15); color: #1a6e2e; }
.status-draft { background: rgba(108,117,125,.15); color: #495057; }
.pkg-card-body { padding: 14px; }
.pkg-title { font-weight: 700; font-size: 14px; color: var(--color-primary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkg-dest { font-size: 12px; margin-bottom: 4px; }
.text-accent { color: var(--color-secondary) !important; }
.pkg-preview-card img { transition: opacity .3s; }

/* ── Package Table Layout (Section 2) ── */
.pkg-table { font-size: 13px; }
.pkg-table thead th { background: var(--color-surface, #f8f9fa); font-size: 12px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .4px; padding: 10px 14px; border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.pkg-table tbody td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.pkg-table tbody tr:hover td { background: rgba(0,0,0,.02); }
.pkg-tbl-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; }
.pkg-tbl-title { font-weight: 600; font-size: 13px; color: var(--color-primary); }
.pkg-picks-badge { background: rgba(201,169,110,.15); color: #8a6a1f; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.pkg-status-toggle { cursor: pointer; }

/* ── Days mode switch ── */
.pkg-days-mode-switch a { font-size: 11px; color: var(--color-secondary); text-decoration: none; }
.pkg-days-mode-switch a:hover { text-decoration: underline; }

/* ── Multi-Image Manager ── */
.pkg-images-manager { min-height: 56px; }
.pkg-img-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pkg-img-thumb { position: relative; width: 110px; height: 80px; border-radius: 8px; overflow: hidden; border: 2px solid var(--color-border); cursor: default; }
.pkg-img-thumb.is-primary { border-color: var(--color-secondary); }
.pkg-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.img-primary-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(201,169,110,.85); color: #fff; font-size: 10px; font-weight: 700; text-align: center; padding: 2px 4px; }
.img-thumb-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .2s; }
.pkg-img-thumb:hover .img-thumb-actions { opacity: 1; }
.img-act-btn { background: rgba(255,255,255,.92); border: none; border-radius: 4px; padding: 3px 5px; font-size: 11px; cursor: pointer; color: var(--color-primary); }
.img-act-btn:hover { background: #fff; }
.img-act-del { color: #dc3545 !important; }

/* ── Itinerary Day Builder ── */
.itin-day-form { background: var(--color-surface, #f8f9fa); border-radius: 10px; padding: 16px; border: 1px solid var(--color-border); }
.itin-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted); margin-bottom: 8px; }
.itin-day-card { border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.itin-day-hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--color-surface, #f8f9fa); border-bottom: 1px solid var(--color-border); }
.itin-day-num-badge { background: var(--color-secondary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 20px; white-space: nowrap; }
.itin-day-title-text { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.itin-day-body { padding: 12px 14px; }
.itin-day-img { width: 100%; max-height: 120px; max-width: 480px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; display: block; }
.itin-day-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.itin-meta-pill { background: rgba(0,0,0,.06); color: var(--color-muted); font-size: 11px; padding: 2px 8px; border-radius: 20px; }
/* Fix 8a — read-only derived Hotel/Flight context (Hotels/Flights tabs remain the source of truth) */
.itin-day-structured-meta { margin-top: 6px; margin-bottom: 0; }
.itin-meta-pill.itin-meta-structured { background: rgba(59,79,228,.08); color: #3B4FE4; }

/* ── Package Highlights ── */
.pkg-star-rating { display: flex; gap: 4px; cursor: pointer; font-size: 22px; padding: 4px 0; }
.pkg-star { cursor: pointer; transition: transform .1s; }
.pkg-star:hover { transform: scale(1.2); }


/* ============================================================
   Phase 5C: merged from dashboard.css (file eliminated, content
   relocated here verbatim, byte-for-byte, per approved
   migration plan — Admin/CMS/Dashboard/Finance/CRM grouping)
   ============================================================ */

/* ============================================================
   dashboard.css — Across The Monde Admin Dashboard
   ============================================================ */

/* ── Clickable stat tiles ──────────────────────────────────── */
.stat-tile-link {
    cursor: pointer;
    min-height: 95px;
    will-change: transform;
    transition: transform .25s ease-out,
                box-shadow .25s ease-out;
}
.stat-tile-link:hover {
    transform: translateY(-3px) scale(1.01);
}

/* ── Quick Actions ─────────────────────────────────────────── */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.qa-btn {
    display: flex; align-items: center;justify-content:center;
    gap: 6px; padding: 12px 6px;
    background: var(--color-bg); border: 1.5px solid var(--color-border);
    border-radius: 8px; text-decoration: none;
    color: var(--color-primary); font-size: 11px; font-weight: 600;
    letter-spacing: .02em; text-align: center;
    transition: all .2s;
}
.qa-btn i { font-size: 18px; color: var(--color-secondary); }
.qa-btn i.fa-circle-plus{color:#23a04f;}
.qa-btn i.fa-comments{color:#2594f9;}
.qa-btn i.fa-location-dot{color:#5a3af0;}
.qa-btn i.fa-file-invoice{color:#f28410;}
.qa-btn i.fa-rotate-left{color:#e34249;}
.qa-btn:hover {
    background:var(--color-primary-lite); color: #fff;
    border-color: var(--color-primary); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30,58,95,.2);
}
.qa-btn:hover i { color: #fff; }

/* ── KPI tile sub-text ─────────────────────────────────────── */
.stat-tile .tile-sub {
    font-size: 10.5px; color: var(--color-muted); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wave-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    overflow: hidden;
    z-index: 1;
}

.wave-bg svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
/* ── Revenue chart KPI strip ───────────────────────────────── */
.dash-rev-kpis {
    display: flex; gap: 24px; flex-wrap: wrap;justify-content:space-between;
}
.dash-rev-kpi-label {
    font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted);font-weight:600;
}
.dash-rev-kpi-value {
    font-size:17px; font-weight: 800; color: var(--color-primary); margin-top: 0px;
}
.dash-rev-kpi-value.accent { color: var(--color-secondary); }
.dash-rev-kpi{display:flex;justify-content:center;align-items:center;gap:10px;    padding: 10px 30px 10px 10px;border-radius: 8px;}
.dash-rev-kpi .__clsDash-rev-kpi-Icon{
        width: 40px;
    height: 40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;box-shadow:0 4px 15px rgba(31,111,255,.12);background:#ffffff61;
}
.dash-rev-kpi .__clsDash-rev-kpi-Icon i{
    font-size: 16px;
}
.dash-rev-kpi .__clsDash-rev-kpi-Icon i.fa-chart-line {color:#136dfe;}
.dash-rev-kpi .__clsDash-rev-kpi-Icon i.fa-star {color:#fea319;}
.dash-rev-kpi .__clsDash-rev-kpi-Icon i.fa-calendar {color:#7c41ea;}
.dash-rev-kpi.__clsRevenue{background:linear-gradient(to right,#e9f2fb 0%,#f1f7fd 35%,#f8fbff 100%);border:1px solid #e4f1ff;}
.dash-rev-kpi.__clsBestMonth{background:linear-gradient(to right, #fff8eb 0%, #fdf8ef 45%, #fffaf1 100%);border:1px solid #fff2d4;}
.dash-rev-kpi.__clsMonth{background:linear-gradient(to right, #f2ebfa 0%, #f7f2fc 35%, #fcf9ff 100%);border:1px solid #f6f0ff;}

/* ── Revenue year select ───────────────────────────────────── */
#revenue-year {
    font-size: 12px;    padding: 4px 10px !important;
    border: 1px solid var(--color-border);
    border-radius: 6px !important;
    color: var(--color-primary);
    background: var(--color-white);
    position: absolute;
    right: 10px;
}

/* ── Doughnut chart center label ───────────────────────────── */
.dash-donut-wrap {
    position: relative; max-width: 180px; margin: 0 auto;
}
.dash-donut-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -54%);
    text-align: center; pointer-events: none;
}
.dash-donut-total {
    font-size: 22px; font-weight: 700; color: var(--color-primary); line-height: 1;
}
.dash-donut-label {
    font-size: 10px; color: var(--color-muted); letter-spacing: .5px;
}

/* ── Legend ────────────────────────────────────────────────── */
.dash-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px;
    margin-top: 10px; font-size: 11px; color: var(--color-muted);
}
.dash-legend-item {
    display: flex; align-items: center; gap: 5px;
}

/* ── Recent Enquiries list ─────────────────────────────────── */
.enq-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.enq-item:last-child { border-bottom: none; }
.enq-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.enq-name { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.enq-meta { font-size: 11px; color: var(--color-muted); margin-top: 1px; }

/* ── Top Packages list ─────────────────────────────────────── */
.top-pkg-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--color-border);
    transition: background .15s;
}
.top-pkg-row:last-child { border-bottom: none; }
.top-pkg-row:hover { background: #fafbfd; }
.top-pkg-rank {
    font-size: 15px; font-weight: 700; color: var(--color-muted);
    width: 20px; flex-shrink: 0; text-align: center;
}
.top-pkg-thumb {
    width: 46px; height: 36px; border-radius: 6px;
    overflow: hidden; flex-shrink: 0; background: #eee;
}
.top-pkg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.top-pkg-thumb-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 14px;
}
.top-pkg-info { flex: 1; min-width: 0; }
.top-pkg-title {
    font-size: 13px; font-weight: 600; color: var(--color-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-pkg-dest { font-size: 11px; color: var(--color-muted); margin-top: 2px; }
.top-pkg-price {
    font-size: 14px; font-weight: 700; color: var(--color-secondary);
    text-align: right; flex-shrink: 0;
}

/* ── Dark mode ─────────────────────────────────────────────── */
[data-theme="dark"] .qa-btn { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .qa-btn:hover { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
[data-theme="dark"] #revenue-year { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .enq-name { color: var(--color-text); }
[data-theme="dark"] .top-pkg-title { color: var(--color-text); }
[data-theme="dark"] .dash-donut-total { color: var(--color-text); }
[data-theme="dark"] .top-pkg-row:hover { background: rgba(255,255,255,.04); }

/* ============================================================
   Phase 5C: merged from crm.css (file eliminated, content
   relocated here verbatim, byte-for-byte, per approved
   migration plan — Admin/CMS/Dashboard/Finance/CRM grouping)
   ============================================================ */

/* crm.css — Across The Monde CRM Styles */

/* ── Pipeline Board ─────────────────────────────────────────── */
.pipeline-board {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px;
    min-height: 480px; align-items: flex-start;
}
.pipeline-board::-webkit-scrollbar { height: 6px; }
.pipeline-board::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.pipeline-board::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }

.pipeline-col {
    flex: 0 0 240px; background: #f4f6fa; border-radius: 14px;
    padding: 12px; min-height: 200px; border: 1px solid var(--color-border);
}
.pipeline-col-converted { background: rgba(40,167,69,.04); border-color: rgba(40,167,69,.2); }
.pipeline-col-lost      { background: rgba(220,53,69,.04); border-color: rgba(220,53,69,.2); }

.pipeline-col-header {
    font-size: 12px; font-weight: 700; color: var(--color-primary);
    margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
    padding-bottom: 10px; border-bottom: 2px solid var(--color-border);
    text-transform: uppercase; letter-spacing: .04em;
}
.col-count {
    background: var(--color-primary); color: #fff;
    border-radius: 20px; padding: 1px 7px; font-size: 11px; margin-left: auto;
}
.converted-count { background: #28a745; }
.lost-count      { background: #dc3545; }

/* Status dots */
.status-dot       { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.new-dot          { background: #17a2b8; }
.contacted-dot    { background: #ffc107; }
.quoted-dot       { background: #6f42c1; }
.negotiating-dot  { background: #e8a020; }
.converted-dot    { background: #28a745; }
.lost-dot         { background: #dc3545; }

/* Pipeline cards */
.pipeline-card {
    background: #fff; border-radius: 10px; padding: 12px;
    margin-bottom: 8px; border: 1px solid var(--color-border);
    cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.pipeline-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    border-color: var(--color-primary);
}
.pipeline-card-name  { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: 3px; }
.pipeline-card-dest  { font-size: 11px; color: var(--color-muted); margin-bottom: 6px; }
.pipeline-card-meta  {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--color-muted);
}
.pipeline-card-budget { font-weight: 600; color: var(--color-secondary); }
.pipeline-card-actions {
    display: flex; gap: 4px; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--color-border);
}
.pc-action-btn {
    flex: 1; font-size: 10px; font-weight: 600; padding: 4px 6px;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; text-align: center; transition: all .15s; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
.pc-action-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Activity Notes ─────────────────────────────────────────── */
.note-item {
    border-left: 3px solid var(--color-secondary); padding: 10px 14px;
    margin-bottom: 12px; background: #f9f9fb;
    border-radius: 0 8px 8px 0;
}
.note-meta { font-size: 11px; color: var(--color-muted); margin-bottom: 4px; }
.note-text { font-size: 13px; color: var(--color-primary); }

/* ── Stage Pipeline ─────────────────────────────────────────── */
.stage-pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.stage-step { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.stage-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--color-border); background: #fff; transition: all .2s; }
.stage-step.done .stage-dot   { background: var(--color-success); border-color: var(--color-success); }
.stage-step.active .stage-dot { background: var(--color-secondary); border-color: var(--color-secondary); transform: scale(1.3); }
.stage-label { font-size: 10px; color: var(--color-muted); white-space: nowrap; }
.stage-step.done .stage-label, .stage-step.active .stage-label { color: var(--color-primary); font-weight: 600; }
.stage-line { flex: 1; height: 3px; background: var(--color-border); margin: 0 2px 18px; }
.stage-line.done { background: var(--color-success); }

/* Dark mode */
[data-theme="dark"] .pipeline-col          { background: var(--color-bg); border-color: var(--color-border); }
[data-theme="dark"] .pipeline-col-converted{ background: rgba(40,167,69,.06); }
[data-theme="dark"] .pipeline-col-lost     { background: rgba(220,53,69,.06); }
[data-theme="dark"] .pipeline-card         { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pipeline-card-name    { color: var(--color-text); }
[data-theme="dark"] .note-item             { background: var(--color-bg); }

/* ============================================================
   Phase 5C: merged from finance.css (file eliminated, content
   relocated here verbatim, byte-for-byte, per approved
   migration plan — Admin/CMS/Dashboard/Finance/CRM grouping)
   ============================================================ */

/* finance.css — Across The Monde Finance Module */

/* ── Detail field ───────────────────────────────────────────── */
.detail-field { margin-bottom: 10px; }
.detail-field .atm-form-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.detail-field > div { font-size: 14px; font-weight: 500; color: var(--color-primary); }

/* ── Summary rows (invoice detail) ─────────────────────────── */
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--color-border); }
.summary-row:last-child { border-bottom: none; }
.summary-total { font-size: 16px; font-weight: 700; }

/* ── Invoice print layout ───────────────────────────────────── */
.invoice-print-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 20px; border-bottom: 2px solid var(--color-border); margin-bottom: 20px;
}
.invoice-number { font-size: 22px; font-weight: 700; color: var(--color-primary); }
.invoice-status-badge {
    display: inline-block; padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.inv-paid    { background: rgba(40,167,69,.12); color: #28a745; }
.inv-partial { background: rgba(232,160,32,.12); color: #e8a020; }
.inv-overdue { background: rgba(220,53,69,.12); color: #dc3545; }
.inv-draft   { background: rgba(108,117,125,.12); color: #6c757d; }

/* ── Payment method badge ───────────────────────────────────── */
.pay-method-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 8px;
    font-size: 11px; font-weight: 600;
    background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
}
.pay-method-badge i { font-size: 13px; color: var(--color-secondary); }

/* ── Refund action buttons ──────────────────────────────────── */
.refund-approve-btn, .refund-reject-btn {
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    border-radius: 6px; cursor: pointer; border: none; transition: all .15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.refund-approve-btn { background: rgba(40,167,69,.1); color: #28a745; border: 1px solid rgba(40,167,69,.2); }
.refund-approve-btn:hover { background: #28a745; color: #fff; }
.refund-reject-btn  { background: rgba(220,53,69,.1); color: #dc3545; border: 1px solid rgba(220,53,69,.2); }
.refund-reject-btn:hover  { background: #dc3545; color: #fff; }

/* ── Print styles ───────────────────────────────────────────── */
@media print {
    #sidebar, #topbar, .btn-atm, .atm-pagination,
    .atm-card-header .ms-auto, #ref-pagination, #inv-pagination { display: none !important; }
    #main-content { margin-left: 0 !important; padding-top: 0 !important; }
    .page-content { padding: 0 !important; }
    .atm-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ============================================================
   Phase 5C: merged from bookingmanage.css (file eliminated, content
   relocated here verbatim, byte-for-byte, per approved
   migration plan — Admin/CMS/Dashboard/Finance/CRM grouping)
   ============================================================ */

/* bookingmanage.css */
.detail-field { margin-bottom: 8px; }
.detail-field .atm-form-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.detail-field > div { font-size: 14px; font-weight: 500; color: var(--color-primary); }

.booking-summary-card .summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--color-border); }
.booking-summary-card .summary-row:last-child { border-bottom: none; }
.booking-summary-card .summary-total { font-size: 15px; font-weight: 700; }

/* ============================================================
   Phase 5C: merged from portal.css (file eliminated, content
   relocated here verbatim, byte-for-byte, per approved
   migration plan — Admin/CMS/Dashboard/Finance/CRM grouping)
   ============================================================ */

/* portal.css */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state i { font-size: 56px; color: var(--color-border); display: block; margin-bottom: 12px; }
.empty-state p { color: var(--color-muted); margin-bottom: 16px; }


/* ============================================================
   Across The Monde — theme.css
   Theme Builder / CMS admin pages only.
   Loaded via ViewBag.PageCss = "theme.css" on all ThemeController
   actions (Settings, Homepage, Banners, Testimonials, Festival,
   SeoSettings, MediaLibrary, AtmPicksManager).
   hb-* shell/layout styles live inline in Homepage.cshtml because
   they are scoped entirely to that view; this file carries shared
   overrides that apply across all Theme Builder pages.
   ============================================================ */

/* ── Color-picker input ─────────────────────────────────────── */
input[type="color"].atm-form-control {
    height: 40px;
    padding: 2px 4px;
    cursor: pointer;
}

/* ── Preview thumbnails (Banners, Testimonials, Media) ─────── */
.theme-thumb {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--color-border);
}

/* ── Sortable drag handle ───────────────────────────────────── */
.drag-handle {
    cursor: grab;
    color: var(--color-muted);
    padding: 0 6px;
}
.drag-handle:active { cursor: grabbing; }

/* ── Festival theme active badge ────────────────────────────── */
.festival-active-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    background: #d1fae5;
    color: #065f46;
}

/* ── Media library grid ─────────────────────────────────────── */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.media-item {
    position: relative;
    border-radius: var(--color-radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: border-color .15s;
}

.media-item:hover { border-color: var(--color-secondary); }

.media-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

.media-item-label {
    font-size: 10px;
    padding: 3px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-muted);
}

/* ── SEO character counter ──────────────────────────────────── */
.seo-char-count {
    font-size: 11px;
    color: var(--color-muted);
    text-align: right;
    margin-top: 2px;
}
.seo-char-count.over { color: #ef4444; }

/* ── Picks month selector ───────────────────────────────────── */
.picks-month-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.picks-month-btn {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.picks-month-btn.active,
.picks-month-btn:hover {
    background: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}

/*Powerd by*/
.tesepr {
    font-family: 'MANDALA_REGULAR', sans-serif !important;
    font-size: 19px;
    font-weight: 600;
    background: #454B9E;
    background: linear-gradient(to right, #454B9E 0%, #3F86C7 50%, #4FC0AD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tx-14 {
    color: #c4cad6;
    font-size: 14px;
}

.excel-upload-box{
    border:1px solid #dcdcdc;
    border-radius:12px;
    padding:18px;
    background:#fff;position:relative;
}

.excel-file-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px;
    border:1px dashed #0d6efd;
    border-radius:10px;
    background:#f8fbff;
    color:#0d6efd;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    margin-bottom:15px;
}

.excel-file-btn:hover{
    background:#eef6ff;
    border-color:#084298;
}

.excel-file-btn i{
    font-size:22px;
    color:#28a745;
}
#clearExcelFile{
    font-size:14px;
    color:red;
    position:absolute;
    top:12px;
    right:11px;
    background:#fff;
    z-index:10;
    cursor:pointer;
    display:none;
}

#btnExcelUpload{
    width:100%;justify-content:center;
}

.login-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:18px;
}

.welcome-line{
    width:55px;
    height:1px;
    background:#d8b15c;
    opacity:.7;
}

.welcome-text{
    color:#d8b15c;
    font-size:12px;
    font-weight:600;
    letter-spacing:5px;
    text-transform:uppercase;
}

.login-title{
    font-size:38px;
    font-weight:700;
    color:#f5c96a;
    text-align:center;
    margin:0;
    letter-spacing:.5px;
    font-family:'Poppins',sans-serif;
    text-shadow:0 2px 12px rgba(245,201,106,.18);
}

.login-subtitle{
    text-align:center;
    color:#d2d7e0;
    font-size:16px;
    margin-top:10px;
    margin-bottom:28px;
    font-weight:400;
}


/* Typeahead DropDown */
body .ui-autocomplete, .typeahead.dropdown-menu {
    position: absolute !important;
    margin-top: 0px !important;
    padding: 8px 0 !important;
    min-width: 95% !important;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 7px;
    list-style: none;
    left: 8px !important;
    font-family: var(--ff-body);
}

    body .ui-autocomplete .ui-menu-item {
        padding: 0;
        margin: 0;
        border: 0;
        width: 100%;
    }

    body .ui-autocomplete .ui-menu-item-wrapper {
        display: block;
        padding: 5px 10px !important;
        font-size: 13px;
        font-weight: 500;
        color: #626262;
        line-height: normal;
        cursor: pointer;
        width: 100%;
    }

    body .ui-autocomplete .ui-state-active {
        background: var(--color-secondary) !important;
        color: #fff !important;
        font-weight: 600;
        margin: 0;
        border-radius: 0;
        border: none !important;
    }

    body .ui-autocomplete .ui-state-focus {
        background: var(--color-primary) !important;
        color: #fff !important;
    }

    body .ui-autocomplete:empty {
        display: none;
    }

body .ui-autocomplete {
    animation: autocompleteFade .18s ease;
}

@keyframes autocompleteFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body .ui-autocomplete::-webkit-scrollbar {
    width: 2px;
}

body .ui-autocomplete::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 10px;
}

body .ui-autocomplete::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
}

    body .ui-autocomplete::-webkit-scrollbar-thumb:hover {
        background: var(--color-secondary);
    }

/* ============================================================
   ADMIN, DASHBOARD, CMS & PORTAL RESPONSIVE COMPREHENSIVE RULES
   ============================================================ */

/* Large Desktop & 4K (1440px - 2560px) */
@media (min-width: 1440px) {
    .container-fluid { max-width: 1800px; margin: 0 auto; }
}

/* Tablet & Medium Laptop (992px - 1199px) */
@media (max-width: 1199px) {
    #sidebar { width: 220px; }
    #content-wrapper { margin-left: 220px; }
    .kpi-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile & Tablet Portrait (< 992px) */
@media (max-width: 991px) {
    #sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 1050;
        transition: left 0.3s ease;
    }
    #sidebar.active { left: 0; }
    .sidebar-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }
    #content-wrapper { margin-left: 0 !important; width: 100% !important; }

    /* Top navbar header actions flex wrap */
    .topbar-actions { gap: 8px !important; }
    .topbar-title { font-size: 1.1rem !important; }

    /* Form & Action Bar Controls */
    .action-bar, .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .action-bar .btn, .filter-bar .btn, .filter-bar .form-control {
        width: 100% !important;
    }
}

/* Mobile Devices (< 576px) */
@media (max-width: 575px) {
    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    .card-header .btn { width: 100% !important; }

    .kpi-card-grid { grid-template-columns: 1fr !important; }
    
    /* Responsive timeline stacking */
    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .timeline-time { margin-bottom: 4px; }
}