/* ========================================================= 1. THEME TOKENS Change Light/Dark colors here only. switch-dark.js adds class="dark-mode" to . ========================================================= */ :root { --theme-page:#e7ecf3; --theme-navbar:#e9eef7; --theme-sidebar:#f1f5f9; --theme-surface:#f8fafc; --theme-soft:#eef2f7; --theme-header:#e9eef7; --theme-hover:#e5ebf3; --theme-text:#1e293b; --theme-muted:#64748b; --theme-border:#cfd8e6; --theme-primary:#6366f1; --theme-primary-hover:#4f46e5; --theme-primary-soft:rgba(99,102,241,.12); --theme-shadow:0 8px 24px rgba(15,23,42,.08); /* Modal colors */ --modal-bg:#f8fafc; --modal-body:#eef2f7; --modal-section:#ffffff; --modal-field:#f8fafc; --modal-field-focus:#ffffff; --modal-soft:#e9eef7; --modal-readonly:#e5ebf3; --modal-summary:#eef2f7; --modal-text:#1e293b; --modal-text-soft:#334155; --modal-muted:#64748b; --modal-placeholder:#94a3b8; --modal-border:#cfd8e6; --modal-border-strong:#b8c4d4; --modal-primary:#6366f1; --modal-primary-hover:#4f46e5; --modal-primary-soft:rgba(99,102,241,.12); --modal-warning:#d97706; --modal-success:#16a34a; --modal-danger:#dc2626; --modal-danger-soft:#fee2e2; --modal-danger-border:#fecaca; --modal-focus-ring:rgba(99,102,241,.20); --modal-header-start:#e9eef7; --modal-header-end:#f8fafc; --modal-shadow:0 20px 55px rgba(15,23,42,.18); /* Component aliases: keep existing selectors easy to maintain. */ --ui-bg:var(--theme-surface); --ui-soft:var(--theme-soft); --ui-head:var(--theme-header); --ui-hover:var(--theme-hover); --ui-text:var(--theme-text); --ui-muted:var(--theme-muted); --ui-border:var(--theme-border); --ui-primary:var(--theme-primary); --ui-primary-hover:var(--theme-primary-hover); --ui-primary-soft:var(--theme-primary-soft); --ui-shadow:var(--theme-shadow); --layout-page-bg:var(--theme-page); --layout-navbar:var(--theme-navbar); --layout-sidebar:var(--theme-sidebar); --layout-surface:var(--theme-surface); --layout-hover:var(--theme-hover); --layout-active:var(--theme-primary); --layout-active-soft:var(--theme-primary-soft); --layout-text:var(--theme-text); --layout-muted:var(--theme-muted); --layout-border:var(--theme-border); --layout-shadow:var(--theme-shadow); } html.dark-mode { --theme-page:#0b1220; --theme-navbar:#111827; --theme-sidebar:#0f172a; --theme-surface:#111827; --theme-soft:#182235; --theme-header:#192438; --theme-hover:#202c40; --theme-text:#e5e7eb; --theme-muted:#94a3b8; --theme-border:#2b374b; --theme-primary:#818cf8; --theme-primary-hover:#6366f1; --theme-primary-soft:rgba(129,140,248,.16); --theme-shadow:0 10px 28px rgba(0,0,0,.24); /* Modal colors */ --modal-bg:#12141c; --modal-body:#0b0d13; --modal-section:#161923; --modal-field:#1b1f2b; --modal-field-focus:#1f2432; --modal-soft:#20242f; --modal-readonly:#14161f; --modal-summary:#1a1f2e; --modal-text:#f2f3f7; --modal-text-soft:#c3c8d6; --modal-muted:#9aa1b4; --modal-placeholder:#6b7284; --modal-border:#262c3d; --modal-border-strong:#2a3040; --modal-primary:#5b9dff; --modal-primary-hover:#3b82f6; --modal-primary-soft:rgba(91,157,255,.12); --modal-warning:#f4b73f; --modal-success:#3ddc84; --modal-danger:#ff6b6b; --modal-danger-soft:#241417; --modal-danger-border:#3a1c20; --modal-focus-ring:rgba(91,157,255,.20); --modal-header-start:#0d0f16; --modal-header-end:#1c2333; --modal-shadow:0 20px 60px rgba(0,0,0,.6); } /* ========================================================= 2. PAGE BACKGROUND ========================================================= */ body, .content-wrapper { background-color:var(--layout-page-bg)!important; } /* ========================================================= 3. DATATABLE + SEARCH PANEL ========================================================= */ .dtable-card,.search-panel { background-color:var(--ui-bg)!important;border:1px solid var(--ui-border)!important; border-radius:10px!important;box-shadow:var(--ui-shadow); color:var(--ui-text);overflow:hidden; } /* Search must not clip the calendar popup. */ .search-panel-wrap, .search-panel, .search-panel .card-body, .search-panel .search-body, .search-panel form, .search-panel .row, .search-panel [class*="col-"], .search-panel .form-group { overflow:visible!important; } .search-panel-wrap, .search-panel { position:relative!important; } /* Fengyuanchen / Bootstrap / jQuery UI datepicker popup. */ /* Select2 3.x and 4.x: dropdown is appended directly under body. */ .select2-drop-active, .select2-container--open .select2-dropdown { position:absolute!important; } .dtable-toolbar,.search-header { background-color:var(--ui-head)!important; border-bottom:1px solid var(--ui-border)!important;padding:9px 12px; } .dtable-body,.search-body {background-color:var(--ui-bg);padding:11px 12px;} .search-panel .card-title {font-size:.95rem;line-height:1.35;} .search-panel .form-group {margin-bottom:9px;} .search-panel h6.header { color:var(--ui-muted);font-size:.7rem;font-weight:700; letter-spacing:.02em;margin-bottom:4px;text-transform:uppercase; } .dtable-actions {gap:5px;} .dtable-actions .btn,.search-panel .btn { border-radius:8px;font-size:.8rem;font-weight:600; min-height:34px;padding:5px 10px;box-shadow:none!important; } .search-panel button[name="search"] { background-color:var(--ui-primary)!important; border-color:var(--ui-primary)!important;color:#fff!important; } .search-panel button[name="search"]:hover { background-color:var(--ui-primary-hover)!important; border-color:var(--ui-primary-hover)!important; } .search-panel .form-control,.dtable-actions .form-control, .dtable-card .dataTables_length select,.dtable-card .dataTables_filter input { background-color:var(--ui-soft)!important;border:1px solid var(--ui-border)!important; border-radius:8px!important;color:var(--ui-text)!important; font-size:.82rem;min-height:34px; } .search-panel .form-control:focus,.dtable-actions .form-control:focus { background-color:var(--ui-bg)!important;border-color:var(--ui-primary)!important; box-shadow:0 0 0 3px var(--ui-primary-soft)!important; } .search-panel .input-group-text { background-color:var(--ui-soft)!important; border-color:var(--ui-border)!important;color:var(--ui-muted)!important; } /* Equal From / To input group */ .search-panel .range-input-group { background-color:var(--ui-soft); border:1px solid var(--ui-border); border-radius:8px; display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); height:38px; overflow:visible; width:100%; } .search-panel .range-input-group>.form-control { background-color:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; height:36px!important; min-height:36px!important; min-width:0; width:100%; } .search-panel .range-input-group>.range-separator { align-items:center; background-color:var(--ui-soft)!important; border:0!important; border-left:1px solid var(--ui-border)!important; border-radius:0!important; border-right:1px solid var(--ui-border)!important; color:var(--ui-muted)!important; display:flex; height:36px!important; justify-content:center; margin:0; min-width:36px; padding:0; } .search-panel .range-input-group:focus-within { background-color:var(--ui-bg); border-color:var(--ui-primary); box-shadow:0 0 0 3px var(--ui-primary-soft); } /* Fallback for the original Bootstrap markup still rendered by the server. */ #form_search .input-group:not(.range-input-group) { align-items:stretch; display:flex; flex-wrap:nowrap; width:100%; } #form_search .input-group:not(.range-input-group)>.form-control { flex:1 1 0!important; height:38px!important; min-height:38px!important; min-width:0!important; width:0!important; } #form_search .input-group:not(.range-input-group)>.form-control:first-child { border-bottom-right-radius:0!important; border-top-right-radius:0!important; } #form_search .input-group:not(.range-input-group)>.form-control:last-child { border-bottom-left-radius:0!important; border-top-left-radius:0!important; } #form_search .input-group:not(.range-input-group)>.input-group-prepend { display:flex; flex:0 0 36px!important; height:38px!important; margin-left:-1px!important; margin-right:-1px!important; width:36px!important; z-index:2; } #form_search .input-group:not(.range-input-group)>.input-group-prepend>.input-group-text { align-items:center; background-color:var(--ui-soft)!important; border-color:var(--ui-border)!important; border-radius:0!important; color:var(--ui-muted)!important; display:flex; height:38px!important; justify-content:center; padding:0!important; width:36px!important; } #form_search .input-group:not(.range-input-group)>.input-group-prepend svg { height:14px; width:9px; } /* Select2 3.x / 4.x: responsive width; multi-select keeps its natural height. */ .search-panel .select2-container { box-sizing:border-box!important; display:block!important; max-width:100%!important; min-width:0!important; width:100%!important; } .search-panel .select2-container .select2-choice, .search-panel .select2-container .select2-choices, .search-panel .select2-container .select2-selection { box-sizing:border-box!important; max-width:100%!important; width:100%!important; } .search-panel .select2-container .select2-selection { background-color:var(--ui-soft)!important; border-color:var(--ui-border)!important; color:var(--ui-text)!important; } .search-panel .select2-container .select2-selection__rendered, .search-panel .select2-container .select2-search__field { color:var(--ui-text)!important; } .search-panel .select2-container .select2-selection__choice { background-color:var(--ui-primary-soft)!important; border-color:var(--ui-primary)!important;color:var(--ui-text)!important; } .search-panel .select2-container .select2-selection__choice__remove { color:var(--ui-muted)!important; } html.dark-mode .select2-dropdown { background-color:var(--theme-soft); border-color:var(--theme-border); color:var(--theme-text); } html.dark-mode .select2-results__option--highlighted { background-color:var(--theme-primary-hover)!important; color:#fff!important; } .dtable-card .dataTables_wrapper,.dtable-card .dataTables_info, .dtable-card .dataTables_length,.dtable-card .dataTables_filter { color:var(--ui-muted)!important;font-size:.78rem; } .dtable-card .dataTables_scroll { border:1px solid var(--ui-border);border-radius:9px;overflow:hidden; } /* Visible header only; native DataTables sort arrows remain untouched. */ .dtable-card .dataTables_scrollHead table.dataTable thead th { background-color:var(--ui-head)!important; border-bottom-color:var(--ui-border)!important; color:var(--ui-text)!important;font-size:.72rem;font-weight:700; padding-top:9px!important;padding-bottom:9px!important; } .dtable-card table.dataTable tbody td { background-color:var(--ui-bg)!important;border-top-color:var(--ui-border)!important; color:var(--ui-text)!important;font-size:.79rem; line-height:1.25;padding:7px 9px!important;vertical-align:middle; } .dtable-card table.dataTable.table-striped tbody tr:nth-of-type(odd) td { background-color:var(--ui-soft)!important; } .dtable-card table.dataTable tbody tr:hover td {background-color:var(--ui-hover)!important;} .dtable-card .dataTables_scrollFoot table.dataTable tfoot th { background-color:var(--ui-head)!important;border-top-color:var(--ui-border)!important; color:var(--ui-text)!important;font-size:.76rem;font-weight:700; padding:8px 9px!important; } .dtable-card .dataTables_processing { background-color:var(--ui-bg)!important;border:1px solid var(--ui-border); border-radius:9px;box-shadow:var(--ui-shadow);color:var(--ui-text)!important; } .dtable-card .dataTables_paginate {padding-top:8px;} .dtable-card .dataTables_paginate ul.pagination {gap:5px;justify-content:flex-end;margin:0;} .dtable-card .dataTables_paginate ul.pagination>li.paginate_button, .dtable-card .dataTables_paginate ul.pagination>li.paginate_button:hover { background-color:transparent!important;border:0!important; box-shadow:none!important;margin:0!important;padding:0!important; } .dtable-card .dataTables_paginate .page-link { align-items:center;background-color:var(--ui-soft)!important; border:1px solid var(--ui-border)!important;border-radius:7px!important; box-shadow:none!important;color:var(--ui-muted)!important; display:flex;justify-content:center;margin:0!important; min-height:32px;min-width:32px;padding:5px 9px; } .dtable-card .dataTables_paginate .page-item.active .page-link, .dtable-card .dataTables_paginate .page-link:hover { background-color:var(--ui-primary)!important; border-color:var(--ui-primary)!important;color:#fff!important; } .dtable-card .dataTables_paginate .page-item.disabled .page-link {opacity:.45;} .dtable-card .dataTables_scrollBody::-webkit-scrollbar {height:9px;width:9px;} .dtable-card .dataTables_scrollBody::-webkit-scrollbar-thumb { background-color:var(--ui-border);border:2px solid var(--ui-bg);border-radius:20px; } @media(max-width:767.98px) { .dtable-toolbar,.dtable-body,.search-header,.search-body {padding:9px;} .dtable-actions,.dtable-actions>div {width:100%;} .dtable-actions .btn,.dtable-actions .input-group {width:100%;} } /* ========================================================= 4. NAVBAR ========================================================= */ .app-navbar { min-height:50px;padding:0 14px;background:var(--layout-navbar)!important; border-bottom:1px solid var(--layout-border)!important;color:var(--layout-text)!important; box-shadow:0 3px 16px rgba(15,23,42,.05); } .app-navbar .nav-link { display:flex;align-items:center;gap:8px;min-height:40px;margin:0 2px;padding:8px 11px!important; border-radius:9px;color:var(--layout-muted)!important;font-size:.88rem; transition:background-color .18s ease,color .18s ease; } .app-navbar .nav-link:hover,.app-navbar .nav-link:focus {background:var(--layout-hover)!important;color:var(--layout-active)!important;} .app-navbar .user-link {font-weight:600;color:var(--layout-text)!important;} .app-navbar .user-link>i {font-size:1.2rem;color:var(--layout-active);} .app-navbar .dropdown-menu { min-width:210px;margin-top:8px;padding:7px;background:var(--layout-surface); border:1px solid var(--layout-border);border-radius:11px;box-shadow:var(--layout-shadow); } .app-navbar .dropdown-item {padding:9px 11px;border-radius:8px;color:var(--layout-text);font-size:.84rem;} .app-navbar .dropdown-item:hover {background:var(--layout-hover);color:var(--layout-active);} .app-navbar .dropdown-divider {border-color:var(--layout-border);} /* Strong selectors prevent old switch CSS from moving the knob outside. */ .app-navbar .app-theme-item {display:flex!important;align-items:center!important;margin-right:12px!important;} #themeToggle.app-theme-toggle { position:relative!important;display:block!important;flex:0 0 48px!important; width:48px!important;min-width:48px!important;max-width:48px!important; height:27px!important;margin:0!important;padding:0!important;overflow:hidden!important; border:1px solid var(--layout-border)!important;border-radius:999px!important; background:var(--layout-hover)!important;cursor:pointer; } #themeToggle .app-theme-knob { position:absolute!important;top:3px!important;left:3px!important;right:auto!important;bottom:auto!important; display:flex!important;align-items:center!important;justify-content:center!important; width:19px!important;min-width:19px!important;height:19px!important;margin:0!important;padding:0!important; border:0!important;border-radius:50%!important;background:var(--layout-active)!important;color:#fff!important; font-size:.65rem!important;line-height:19px!important;box-shadow:0 3px 8px rgba(99,102,241,.35)!important; transform:translate3d(0,0,0)!important;transition:transform .22s ease!important; } html.dark-mode #themeToggle .app-theme-knob {transform:translate3d(21px,0,0)!important;} /* ========================================================= 5. SIDEBAR ========================================================= */ .app-sidebar { background:var(--layout-sidebar)!important;border-right:1px solid var(--layout-border); box-shadow:4px 0 22px rgba(15,23,42,.06)!important; } .app-sidebar .brand-link { display:flex;align-items:center;min-height:50px;padding:9px 14px;background:var(--layout-navbar)!important; border-bottom:1px solid var(--layout-border)!important;color:var(--layout-text)!important; } .app-sidebar .brand-image { width:36px!important;height:36px!important;margin:0 10px 0 0!important;padding:3px; object-fit:contain;background:#fff;border:1px solid var(--layout-border);box-shadow:none!important; } .app-sidebar .brand-text {font-size:1rem;font-weight:700!important;letter-spacing:.02em;} .app-sidebar .sidebar {padding:9px 8px 16px;overflow-x:hidden;} .app-sidebar .nav-sidebar>.nav-item {margin-bottom:3px;} .app-sidebar .nav-sidebar .nav-link { min-height:42px;padding:9px 11px;border-radius:9px;color:var(--layout-muted)!important;font-size:.84rem; transition:background-color .18s ease,color .18s ease,transform .18s ease; } .app-sidebar .nav-sidebar .nav-link:hover {background:var(--layout-hover)!important;color:var(--layout-text)!important;transform:translateX(2px);} .app-sidebar .nav-sidebar .nav-link.active {background:var(--layout-active)!important;color:#fff!important;box-shadow:0 5px 13px rgba(99,102,241,.25);} .app-sidebar .nav-sidebar .nav-icon,.app-sidebar .nav-sidebar .nav-link>i:first-child { width:22px;margin-right:7px;text-align:center;font-size:.9rem; } .app-sidebar .nav-sidebar .nav-link p {font-weight:600;} .app-sidebar .nav-treeview {margin:4px 0 6px 14px;padding-left:8px;border-left:1px solid var(--layout-border);} .app-sidebar .nav-treeview>.nav-item>.nav-link {min-height:37px;padding:7px 9px;font-size:.79rem;} .app-sidebar .nav-treeview>.nav-item>.nav-link.active {background:var(--layout-active-soft)!important;color:var(--layout-active)!important;box-shadow:none;} .app-sidebar .right {transition:transform .2s ease;} .app-sidebar .menu-open>.nav-link .right {transform:rotate(-90deg);} .app-sidebar .os-scrollbar-handle {background:var(--layout-border)!important;} /* ========================================================= 6. RESPONSIVE LAYOUT ========================================================= */ @media (max-width:575.98px) { .app-navbar {padding:0 7px;} .app-navbar .user-name {display:none;} .app-navbar .app-theme-item {margin-right:5px!important;} .app-navbar .dropdown-toggle::after {display:none;} } /* ========================================================= 7. CUSTOMER MODAL Colors come from the Modal tokens in Light/Dark theme. ========================================================= */ :is(#modal-editadd,#modal-editadd2) .modal-content{ border:1px solid var(--modal-border-strong); border-radius: 16px; overflow: hidden; background: var(--modal-bg); box-shadow:var(--modal-shadow); } :is(#modal-editadd,#modal-editadd2) .modal-header{ background: linear-gradient(135deg,var(--modal-header-start) 0%,var(--modal-header-end) 100%); border-bottom: 1px solid var(--modal-border); padding: 18px 24px; } :is(#modal-editadd,#modal-editadd2) .modal-header .modal-title{ color:var(--modal-text); font-weight:600; letter-spacing:.3px; } :is(#modal-editadd,#modal-editadd2) .modal-header .modal-title:before{ content:""; display:inline-block; width:18px; height:18px; margin-right:10px; vertical-align:-3px; background-color:var(--modal-warning); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h10l6 6v12H4z' fill='black'/%3E%3Cpath d='M14 3v6h6' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h10l6 6v12H4z' fill='black'/%3E%3Cpath d='M14 3v6h6' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } :is(#modal-editadd,#modal-editadd2) .modal-close{ color:var(--modal-text); opacity:.75; text-shadow:none; font-weight:300; } :is(#modal-editadd,#modal-editadd2) .modal-close:hover{ opacity:1; } :is(#modal-editadd,#modal-editadd2) .modal-body{ background:var(--modal-body); padding: 24px 24px 8px; } :is(#modal-editadd,#modal-editadd2) .modal-footer{ background:var(--modal-bg); border-top:1px solid var(--modal-border); padding: 14px 24px; } /* ===== Section cards ===== */ :is(#modal-editadd,#modal-editadd2) .form-section{ background:var(--modal-section); border-radius: 12px; padding: 20px 20px 6px; margin-bottom: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.35); border: 1px solid var(--modal-border); } :is(#modal-editadd,#modal-editadd2) legend.text-warning{ width:auto; display:flex; align-items:center; gap:8px; font-size: 1.05rem; font-weight:700; color:var(--modal-text) !important; border:none; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--modal-soft); } :is(#modal-editadd,#modal-editadd2) legend.text-warning:before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--modal-warning); display:inline-block; flex-shrink:0; box-shadow: 0 0 8px rgba(244,183,63,.6); } :is(#modal-editadd,#modal-editadd2) .form-section--buyer legend.text-warning:before{ background:var(--modal-primary); box-shadow: 0 0 8px rgba(91,157,255,.6); } :is(#modal-editadd,#modal-editadd2) .form-section--guarantor legend.text-warning:before{ background:var(--modal-warning); box-shadow: 0 0 8px rgba(244,183,63,.6); } :is(#modal-editadd,#modal-editadd2) .form-section--loan legend.text-warning:before{ background:var(--modal-success); box-shadow: 0 0 8px rgba(61,220,132,.6); } /* ===== Fields ===== */ :is(#modal-editadd,#modal-editadd2) .form-group{ margin-bottom: 16px; } :is(#modal-editadd,#modal-editadd2) label{ font-size: .84rem; font-weight: 600; color:var(--modal-muted); margin-bottom: 6px; display:flex; align-items:center; gap:6px; } :is(#modal-editadd,#modal-editadd2) label .badge-danger{ background:var(--modal-danger); color:#fff; font-size:.62rem; font-weight:700; line-height:1; width:16px; height:16px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow: 0 0 6px rgba(255,92,92,.55); } :is(#modal-editadd,#modal-editadd2) .form-control{ border: 1px solid var(--modal-border-strong); border-radius: 8px; background:var(--modal-field); color:var(--modal-text); padding: 9px 12px; height: auto; font-size:.92rem; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } :is(#modal-editadd,#modal-editadd2) .form-control::placeholder{ color:var(--modal-placeholder); } :is(#modal-editadd,#modal-editadd2) .form-control:focus{ border-color:var(--modal-primary); box-shadow:0 0 0 3px var(--modal-focus-ring); background:var(--modal-field-focus); color:var(--modal-text); } :is(#modal-editadd,#modal-editadd2) select.form-control option{ background:var(--modal-field); color:var(--modal-text); } :is(#modal-editadd,#modal-editadd2) .form-control[readonly]{ background:var(--modal-readonly); color:var(--modal-placeholder); cursor:not-allowed; border-color:var(--modal-soft); } :is(#modal-editadd,#modal-editadd2) .input-group .form-control{ border-top-right-radius: 8px; border-bottom-right-radius: 8px; } :is(#modal-editadd,#modal-editadd2) .input-group-prepend:not(:first-child) .input-group-text, :is(#modal-editadd,#modal-editadd2) .input-group-prepend:not(:first-child) .btn{ border-top-right-radius: 8px; border-bottom-right-radius: 8px; } :is(#modal-editadd,#modal-editadd2) .input-group-text{ background:var(--modal-soft); border:1px solid var(--modal-border-strong); border-left:none; color:var(--modal-muted); min-width: 42px; justify-content:center; } :is(#modal-editadd,#modal-editadd2) .input-group .btn-info{ background:var(--modal-primary); border-color:var(--modal-primary); color:#fff; border-radius:0 8px 8px 0; } :is(#modal-editadd,#modal-editadd2) .input-group .btn-info:hover{ background:var(--modal-primary-hover); border-color:var(--modal-primary-hover); } /* readonly "summary" figures in the loan section */ :is(#modal-editadd,#modal-editadd2) .form-section--loan input[readonly]{ font-weight:700; color:var(--modal-text); background:var(--modal-summary); border-color:var(--modal-border); font-size:1rem; } :is(#modal-editadd,#modal-editadd2) #total_cus{ color:var(--modal-danger); background:var(--modal-danger-soft); border-color:var(--modal-danger-border); } /* ===== Footer buttons ===== */ :is(#modal-editadd,#modal-editadd2) #submit_save2{ background: linear-gradient(135deg,#1fae63,#128a49); border:none; color:#fff; border-radius: 8px; padding: 10px 34px; font-weight:600; letter-spacing:.3px; box-shadow: 0 6px 18px rgba(31,174,99,.35); } :is(#modal-editadd,#modal-editadd2) #submit_save2:hover{ filter:brightness(1.1); } :is(#modal-editadd,#modal-editadd2) .modal-footer .btn-default{ background:var(--modal-field); border-radius: 8px; border:1px solid var(--modal-border-strong); color:var(--modal-text-soft); padding: 8px 22px; } :is(#modal-editadd,#modal-editadd2) .modal-footer .btn-default:hover{ background:var(--modal-soft); color:var(--modal-text); } /* ===== Custom file upload (Bootstrap custom-file) ===== */ :is(#modal-editadd,#modal-editadd2) .custom-file{ display:block; height:auto!important; min-height:44px; padding-top:44px; position:relative; width:100%; } :is(#modal-editadd,#modal-editadd2) .custom-file-input{ left:0; position:absolute; top:0; z-index: 2; width: 100%; height:44px; margin: 0; opacity: 0; cursor: pointer; } :is(#modal-editadd,#modal-editadd2) .custom-file-label{ position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(1.5em + 1rem + 2px); padding: .5rem .9rem; font-weight: 400; font-size: .92rem; line-height: 1.5; color: var(--modal-placeholder); background: var(--modal-field); border: 1px dashed var(--modal-border); border-radius: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: border-color .15s ease, background .15s ease, color .15s ease; } :is(#modal-editadd,#modal-editadd2) .custom-file-label:after{ content: "Upload"; position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; padding: 0 16px; color: var(--modal-text-soft); background:linear-gradient(135deg,var(--modal-soft),var(--modal-field)); border-left: 1px solid var(--modal-border); border-radius: 0 8px 8px 0; font-size: .84rem; font-weight: 600; } :is(#modal-editadd,#modal-editadd2) .custom-file-label:before{ content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; background-color: var(--modal-primary); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6.5v9a4.5 4.5 0 0 1-9 0v-10a3 3 0 1 1 6 0v9.5a1.5 1.5 0 0 1-3 0v-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6.5v9a4.5 4.5 0 0 1-9 0v-10a3 3 0 1 1 6 0v9.5a1.5 1.5 0 0 1-3 0v-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } :is(#modal-editadd,#modal-editadd2) .custom-file-input:hover ~ .custom-file-label, :is(#modal-editadd,#modal-editadd2) .custom-file-input:focus ~ .custom-file-label{ border-color: var(--modal-primary); background: var(--modal-field-focus); color: var(--modal-text-soft); box-shadow:0 0 0 3px var(--modal-focus-ring); } :is(#modal-editadd,#modal-editadd2) .custom-file-input.is-valid ~ .custom-file-label, :is(#modal-editadd,#modal-editadd2) .custom-file-input:not(:invalid):not([value=""]) ~ .custom-file-label{ color: var(--modal-text); border-color:var(--modal-success); } /* ===== Image preview strip ===== */ :is(#modal-editadd,#modal-editadd2) .img-show{ align-items:flex-start; clear:both; display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin: 12px 0 4px; padding: 0; position:relative; z-index:0; } :is(#modal-editadd,#modal-editadd2) .img-show:empty{ display: none; } :is(#modal-editadd,#modal-editadd2) .img-show img, :is(#modal-editadd,#modal-editadd2) .img-show .img-thumb{ display:block; width:auto; height:auto; max-width:100px; max-height:100px; object-fit: cover; background: var(--modal-field); padding: 4px; margin: 0; border-radius: 10px; border: 1px solid var(--modal-border-strong); box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: transform .15s ease, border-color .15s ease; } :is(#modal-editadd,#modal-editadd2) .img-show img:hover{ transform: scale(1.05); border-color: var(--modal-primary); cursor: zoom-in; } /* remove/close badge that some scripts inject over a preview thumbnail */ :is(#modal-editadd,#modal-editadd2) .img-show .img-remove, :is(#modal-editadd,#modal-editadd2) .img-show .fa-times-circle{ color: var(--modal-danger); background: var(--modal-bg); border-radius: 50%; } /* Modal scrollbar */ :is(#modal-editadd,#modal-editadd2) .modal-body::-webkit-scrollbar{ width:10px; } :is(#modal-editadd,#modal-editadd2) .modal-body::-webkit-scrollbar-track{ background:var(--modal-body); } :is(#modal-editadd,#modal-editadd2) .modal-body::-webkit-scrollbar-thumb{ background:var(--modal-border-strong); border-radius: 10px; } :is(#modal-editadd,#modal-editadd2) .modal-body::-webkit-scrollbar-thumb:hover{ background:var(--modal-border-strong); } /* ===== Owner panel () ===== */ :is(#modal-editadd,#modal-editadd2) .owner-panel{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--modal-section); border: 1px solid var(--modal-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 22px; } :is(#modal-editadd,#modal-editadd2) .owner-title{ font-size: .98rem; font-weight: 700; color: var(--modal-text); display: flex; align-items: center; gap: 8px; } :is(#modal-editadd,#modal-editadd2) .owner-title:before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--modal-primary); box-shadow: 0 0 8px rgba(91,157,255,.6); display:inline-block; flex-shrink:0; } :is(#modal-editadd,#modal-editadd2) .owner-subtitle{ font-size: .78rem; color: var(--modal-placeholder); margin-top: 3px; } :is(#modal-editadd,#modal-editadd2) .owner-options{ display: flex; flex-wrap: wrap; gap: 10px; } :is(#modal-editadd,#modal-editadd2) .owner-option{ position: relative; } :is(#modal-editadd,#modal-editadd2) .owner-option input[type="checkbox"]{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } :is(#modal-editadd,#modal-editadd2) .owner-option label{ display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 18px 9px 14px; font-size: .86rem; font-weight: 600; color: var(--modal-muted); background: var(--modal-field); border: 1px solid var(--modal-border-strong); border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; user-select: none; } :is(#modal-editadd,#modal-editadd2) .owner-option label:before{ content:""; width: 16px; height: 16px; flex-shrink: 0; border-radius: 5px; border: 1.5px solid var(--modal-border-strong); background: var(--modal-bg); transition: background .15s ease, border-color .15s ease; } :is(#modal-editadd,#modal-editadd2) .owner-option input[type="checkbox"]:hover ~ label{ border-color:var(--modal-border-strong); color: var(--modal-text-soft); } :is(#modal-editadd,#modal-editadd2) .owner-option input[type="checkbox"]:checked ~ label{ background:var(--modal-primary-soft); border-color: var(--modal-primary); color:var(--modal-text); } :is(#modal-editadd,#modal-editadd2) .owner-option input[type="checkbox"]:checked ~ label:before{ background: var(--modal-primary); border-color: var(--modal-primary); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 70%; mask-size: 70%; } :is(#modal-editadd,#modal-editadd2) .owner-option input[type="checkbox"]:focus-visible ~ label{ box-shadow:0 0 0 3px var(--modal-focus-ring); } :is(#modal-editadd,#modal-editadd2) .owner-option input[type="checkbox"]:active ~ label{ transform: scale(.97); } @media (max-width: 576px){ :is(#modal-editadd,#modal-editadd2) .owner-panel{ flex-direction: column; align-items: flex-start; } } /* ========================================================= 8. MODAL REDESIGN Built on the existing modal variables and selectors. ========================================================= */ :is(#modal-editadd,#modal-editadd2) .modal-dialog{ width:calc(100% - 32px); max-width:1180px; margin:24px auto; } :is(#modal-editadd,#modal-editadd2) .modal-content{ border-color:var(--modal-border); border-radius:20px; box-shadow:0 24px 70px rgba(15,23,42,.22); } :is(#modal-editadd,#modal-editadd2) .modal-header{ position:relative; align-items:center; min-height:76px; padding:18px 26px; background:linear-gradient(135deg,var(--modal-header-start),var(--modal-header-end)); } :is(#modal-editadd,#modal-editadd2) .modal-header:after{ content:""; position:absolute; bottom:-1px; left:0; width:150px; height:3px; border-radius:0 999px 999px 0; background:linear-gradient(90deg,var(--modal-primary),var(--modal-success)); } :is(#modal-editadd,#modal-editadd2) .modal-header .modal-title{ dis:flex; align-items:center; margin:0; font-size:1.16rem; font-weight:700; } :is(#modal-editadd,#modal-editadd2) .modal-header .modal-title:before{ width:34px; height:34px; margin-right:12px; background-color:var(--modal-primary); } :is(#modal-editadd,#modal-editadd2) .modal-close, :is(#modal-editadd,#modal-editadd2) .modal-header .close{ dis:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin:0; padding:0; border:1px solid var(--modal-border); border-radius:11px; background:var(--modal-field); color:var(--modal-muted); font-size:1.4rem; line-height:1; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; } :is(#modal-editadd,#modal-editadd2) .modal-close:hover, :is(#modal-editadd,#modal-editadd2) .modal-header .close:hover{ transform:rotate(5deg); border-color:var(--modal-danger); background:var(--modal-danger-soft); color:var(--modal-danger); } :is(#modal-editadd,#modal-editadd2) .modal-body{ max-height:calc(100vh - 180px); padding:24px 26px 8px; overflow-x:hidden; overflow-y:auto; } :is(#modal-editadd,#modal-editadd2) .form-section{ position:relative; margin-bottom:20px; padding:21px 21px 6px; border-radius:15px; box-shadow:0 6px 20px rgba(15,23,42,.07); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } :is(#modal-editadd,#modal-editadd2) .form-section:hover{ border-color:var(--modal-primary); box-shadow:0 9px 28px rgba(15,23,42,.1); } :is(#modal-editadd,#modal-editadd2) legend.text-warning{ width:100%; min-height:38px; margin:0 0 18px; padding:0 0 11px; font-size:1rem; } :is(#modal-editadd,#modal-editadd2) legend.text-warning:before{ width:10px; height:10px; box-shadow:none; } :is(#modal-editadd,#modal-editadd2) .form-group{margin-bottom:17px;} :is(#modal-editadd,#modal-editadd2) label{ min-height:20px; margin-bottom:7px; font-size:.8rem; font-weight:700; letter-spacing:.015em; } /* Keep iCheck labels in their original inline layout. */ :is(#modal-editadd,#modal-editadd2) [class*="icheck-"] > label{ display:inline-block; align-items:initial; gap:initial; min-height:initial; margin-bottom:0; } :is(#modal-editadd,#modal-editadd2) .form-control, :is(#modal-editadd,#modal-editadd2) .custom-select{ min-height:42px; padding:9px 12px; border-radius:10px; font-size:.9rem; } :is(#modal-editadd,#modal-editadd2) textarea.form-control{ min-height:88px; resize:vertical; } :is(#modal-editadd,#modal-editadd2) .input-group>.form-control{ border-radius:10px 0 0 10px; } :is(#modal-editadd,#modal-editadd2) .input-group-text, :is(#modal-editadd,#modal-editadd2) .input-group .btn{ min-height:42px; border-radius:0 10px 10px 0; } :is(#modal-editadd,#modal-editadd2) .form-section--loan input[readonly]{ min-height:46px; font-size:1.02rem; font-variant-numeric:tabular-nums; } :is(#modal-editadd,#modal-editadd2) .owner-panel{ padding:18px 20px; border-radius:15px; box-shadow:0 5px 18px rgba(15,23,42,.06); } :is(#modal-editadd,#modal-editadd2) .owner-option label{ min-height:40px; padding:8px 16px 8px 12px; } :is(#modal-editadd,#modal-editadd2) .custom-file-input, :is(#modal-editadd,#modal-editadd2) .custom-file-label{height:44px;} :is(#modal-editadd,#modal-editadd2) .custom-file{ height:auto!important; min-height:44px; } :is(#modal-editadd,#modal-editadd2) .custom-file-label{ padding:10px 100px 10px 13px; border-radius:10px; } :is(#modal-editadd,#modal-editadd2) .custom-file-label:after{ min-width:88px; justify-content:center; border-radius:0 10px 10px 0; } :is(#modal-editadd,#modal-editadd2) .modal-footer{ dis:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:70px; padding:13px 26px; box-shadow:0 -8px 24px rgba(15,23,42,.06); } :is(#modal-editadd,#modal-editadd2) .modal-footer .btn{ min-width:112px; min-height:42px; margin:0; border-radius:10px; font-weight:700; transition:transform .15s ease,filter .15s ease; } :is(#modal-editadd,#modal-editadd2) .modal-footer .btn:hover{transform:translateY(-1px);} :is(#modal-editadd,#modal-editadd2) #submit_save2{ min-width:145px; padding:10px 24px; border-radius:10px; } html.dark-mode :is(#modal-editadd,#modal-editadd2) .modal-content{ box-shadow:0 28px 80px rgba(0,0,0,.62); } html.dark-mode :is(#modal-editadd,#modal-editadd2) .form-section, html.dark-mode :is(#modal-editadd,#modal-editadd2) .owner-panel{ box-shadow:0 7px 22px rgba(0,0,0,.22); } @media (max-width:767.98px){ :is(#modal-editadd,#modal-editadd2) .modal-dialog{ width:calc(100% - 16px); margin:8px auto; } :is(#modal-editadd,#modal-editadd2) .modal-content{border-radius:15px;} :is(#modal-editadd,#modal-editadd2) .modal-header{ min-height:64px; padding:13px 15px; } :is(#modal-editadd,#modal-editadd2) .modal-header .modal-title{font-size:1rem;} :is(#modal-editadd,#modal-editadd2) .modal-header .modal-title:before{ width:29px; height:29px; margin-right:9px; } :is(#modal-editadd,#modal-editadd2) .modal-body{ max-height:calc(100vh - 140px); padding:14px 12px 4px; } :is(#modal-editadd,#modal-editadd2) .form-section{ margin-bottom:14px; padding:17px 14px 3px; border-radius:12px; } :is(#modal-editadd,#modal-editadd2) .owner-panel{ margin-bottom:14px; padding:15px 14px; } :is(#modal-editadd,#modal-editadd2) .owner-options{width:100%;} :is(#modal-editadd,#modal-editadd2) .owner-option{flex:1 1 auto;} :is(#modal-editadd,#modal-editadd2) .owner-option label{justify-content:center;} :is(#modal-editadd,#modal-editadd2) .modal-footer{ min-height:62px; padding:9px 12px; } :is(#modal-editadd,#modal-editadd2) .modal-footer .btn{ flex:1 1 0; min-width:0; } } /* ========================================================= CUSTOMER VIEW MODAL ========================================================= */ :is(#modal-editadd, #modal-editadd2) .modal-dialog { max-width: 1180px; width: calc(100% - 32px); margin: 24px auto; } :is(#modal-editadd, #modal-editadd2) .modal-content { overflow: hidden; background: var(--modal-bg); border: 1px solid var(--modal-border); border-radius: 20px; box-shadow: var(--modal-shadow); } /* Header */ :is(#modal-editadd, #modal-editadd2) .modal-header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 16px 24px; background: linear-gradient( 135deg, var(--modal-header-start), var(--modal-header-end) ); border-bottom: 1px solid var(--modal-border); } :is(#modal-editadd, #modal-editadd2) .modal-heading { display: flex; align-items: center; gap: 12px; min-width: 0; } :is(#modal-editadd, #modal-editadd2) .modal-heading-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; color: #fff; background: linear-gradient( 135deg, var(--modal-primary), var(--modal-primary-hover) ); border-radius: 12px; box-shadow: 0 7px 18px var(--modal-primary-soft); } :is(#modal-editadd, #modal-editadd2) .modal-title { margin: 0; color: var(--modal-text); font-size: 1.1rem; font-weight: 700; line-height: 1.3; } :is(#modal-editadd, #modal-editadd2) .modal-title::before { display: none; } :is(#modal-editadd, #modal-editadd2) .modal-subtitle { margin-top: 3px; color: var(--modal-muted); font-size: 0.78rem; } :is(#modal-editadd, #modal-editadd2) .modal-close { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0; color: var(--modal-muted); background: var(--modal-field); border: 1px solid var(--modal-border); border-radius: 11px; font-size: 1.4rem; line-height: 1; opacity: 1; text-shadow: none; transition: 0.18s ease; } :is(#modal-editadd, #modal-editadd2) .modal-close:hover { color: var(--modal-danger); background: var(--modal-danger-soft); border-color: var(--modal-danger-border); transform: rotate(5deg); } /* Body */ :is(#modal-editadd, #modal-editadd2) .modal-body { max-height: calc(100vh - 180px); padding: 22px; overflow-x: hidden; overflow-y: auto; background: var(--modal-body); } /* Main section */ :is(#modal-editadd, #modal-editadd2) .customer-section { --section-color: var(--modal-primary); margin-bottom: 22px; padding: 20px; background: var(--modal-section); border: 1px solid var(--modal-border); border-radius: 16px; box-shadow: 0 7px 22px rgba(15, 23, 42, 0.07); } :is(#modal-editadd, #modal-editadd2) .customer-section:last-child { margin-bottom: 8px; } :is(#modal-editadd, #modal-editadd2) .customer-section--guarantor { --section-color: var(--modal-warning); } :is(#modal-editadd, #modal-editadd2) .customer-section-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--modal-border); } :is(#modal-editadd, #modal-editadd2) .customer-section-title { display: flex; align-items: center; gap: 11px; min-width: 0; } :is(#modal-editadd, #modal-editadd2) .section-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; color: var(--section-color); background: var(--modal-primary-soft); border: 1px solid var(--modal-border); border-radius: 11px; } :is(#modal-editadd, #modal-editadd2) .customer-section--guarantor .section-icon { color: var(--modal-warning); background: rgba(217, 119, 6, 0.12); } :is(#modal-editadd, #modal-editadd2) .customer-section-title h5 { margin: 0; color: var(--modal-text); font-size: 1rem; font-weight: 700; } :is(#modal-editadd, #modal-editadd2) .customer-section-title p { margin: 3px 0 0; color: var(--modal-muted); font-size: 0.76rem; } :is(#modal-editadd, #modal-editadd2) .section-badge { flex-shrink: 0; padding: 5px 11px; color: var(--section-color); background: var(--modal-primary-soft); border: 1px solid var(--modal-border); border-radius: 999px; font-size: 0.72rem; font-weight: 700; } :is(#modal-editadd, #modal-editadd2) .customer-section--guarantor .section-badge { color: var(--modal-warning); background: rgba(217, 119, 6, 0.12); } /* Customer profile */ :is(#modal-editadd, #modal-editadd2) .customer-profile-card { padding: 16px; background: var(--modal-field); border: 1px solid var(--modal-border); border-radius: 14px; } :is(#modal-editadd, #modal-editadd2) .customer-main-image { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--modal-readonly); border: 1px solid var(--modal-border); border-radius: 13px; cursor: pointer; } :is(#modal-editadd, #modal-editadd2) .customer-main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; } :is(#modal-editadd, #modal-editadd2) .customer-main-image:hover img { transform: scale(1.035); } :is(#modal-editadd, #modal-editadd2) .image-overlay { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; color: #fff; background: rgba(15, 23, 42, 0.72); border-radius: 8px; font-size: 0.7rem; pointer-events: none; } :is(#modal-editadd, #modal-editadd2) .customer-detail { padding: 3px 4px 3px 12px; } :is(#modal-editadd, #modal-editadd2) .customer-name { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--modal-border); } :is(#modal-editadd, #modal-editadd2) .customer-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; color: var(--section-color); background: var(--modal-primary-soft); border-radius: 12px; } :is(#modal-editadd, #modal-editadd2) .customer-section--guarantor .customer-avatar { color: var(--modal-warning); background: rgba(217, 119, 6, 0.12); } :is(#modal-editadd, #modal-editadd2) .customer-label, :is(#modal-editadd, #modal-editadd2) .info-label { display: block; margin-bottom: 2px; color: var(--modal-muted); font-size: 0.72rem; font-weight: 600; } :is(#modal-editadd, #modal-editadd2) .customer-name h4 { margin: 0; color: var(--modal-text); font-size: 1.15rem; font-weight: 700; } /* Information grid */ :is(#modal-editadd, #modal-editadd2) .customer-info-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; width: 100%; } /* à ¸›à ¹‰à ¸­à ¸‡à ¸à ¸±à ¸™à ¸„à ¹ˆà ¸²à ¸ˆà ¸²à ¸ Bootstrap à ¸—à ¸³à ¹ƒà ¸«à ¹‰à ¸Šà ¹ˆà ¸­à ¸‡à ¹€à ¸žà ¸µà ¹‰à ¸¢à ¸™ */ :is(#modal-editadd, #modal-editadd2) .customer-info-item { display: flex; align-items: flex-start; gap: 10px; width: auto !important; max-width: none !important; min-width: 0; min-height: 64px; flex: none !important; padding: 11px 12px; background: var(--modal-section); border: 1px solid var(--modal-border); border-radius: 10px; box-shadow: 0 2px 7px rgba(15, 23, 42, 0.04); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } :is(#modal-editadd, #modal-editadd2) .customer-info-item:hover { border-color: var(--modal-primary); box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } :is(#modal-editadd, #modal-editadd2) .customer-info-item .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; color: var(--modal-primary); background: var(--modal-primary-soft); border-radius: 9px; font-size: .86rem; } /* à ¹€à ¸•à ¹‡à ¸¡à ¹à ¸–à ¸§ */ :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-12 { grid-column: span 12; } /* à ¹à ¸–à ¸§à ¸¥à ¸° 2 à ¸Šà ¹ˆà ¸­à ¸‡ */ :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-6 { grid-column: span 6; } /* à ¹à ¸–à ¸§à ¸¥à ¸° 3 à ¸Šà ¹ˆà ¸­à ¸‡ */ :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-4 { grid-column: span 4; } /* à ¹à ¸–à ¸§à ¸¥à ¸° 4 à ¸Šà ¹ˆà ¸­à ¸‡ */ :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-3 { grid-column: span 3; } :is(#modal-editadd, #modal-editadd2) .customer-info-item--full { grid-column: span 12; } /* à ¸›à ¹‰à ¸­à ¸‡à ¸à ¸±à ¸™à ¸‚à ¹‰à ¸­à ¸„à ¸§à ¸²à ¸¡à ¸¢à ¸²à ¸§à ¸”à ¸±à ¸™ Grid */ :is(#modal-editadd, #modal-editadd2) .customer-info-item > div { min-width: 0; width: 100%; padding-top: 1px; } :is(#modal-editadd, #modal-editadd2) .customer-info-item strong { display: block; color: var(--modal-text); font-size: .86rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; } /* Location */ :is(#modal-editadd, #modal-editadd2) .customer-location-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 13px; color: #fff; background: var(--modal-primary); border-radius: 9px; font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: 0.18s ease; } :is(#modal-editadd, #modal-editadd2) .customer-location-button:hover { color: #fff; background: var(--modal-primary-hover); box-shadow: 0 5px 15px var(--modal-primary-soft); transform: translateY(-1px); } /* Gallery */ :is(#modal-editadd, #modal-editadd2) .customer-gallery-header { display: flex; align-items: center; gap: 7px; margin: 17px 0 10px; color: var(--modal-text-soft); font-size: 0.82rem; font-weight: 700; } :is(#modal-editadd, #modal-editadd2) .customer-gallery-header span { margin-left: auto; color: var(--modal-muted); font-size: 0.72rem; font-weight: 600; } :is(#modal-editadd, #modal-editadd2) .customer-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } :is(#modal-editadd, #modal-editadd2) .customer-gallery-item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--modal-field); border: 1px solid var(--modal-border); border-radius: 11px; cursor: pointer; } :is(#modal-editadd, #modal-editadd2) .customer-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } :is(#modal-editadd, #modal-editadd2) .customer-gallery-item:hover img { transform: scale(1.06); } :is(#modal-editadd, #modal-editadd2) .gallery-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #fff; background: rgba(15, 23, 42, 0.72); border-radius: 8px; pointer-events: none; } /* Footer */ :is(#modal-editadd, #modal-editadd2) .modal-footer { display: flex; align-items: center; justify-content: flex-end; min-height: 68px; padding: 12px 24px; background: var(--modal-bg); border-top: 1px solid var(--modal-border); } :is(#modal-editadd, #modal-editadd2) .customer-close-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 130px; min-height: 41px; margin: 0; color: var(--modal-text-soft); background: var(--modal-field); border: 1px solid var(--modal-border-strong); border-radius: 10px; font-size: 0.82rem; font-weight: 700; } :is(#modal-editadd, #modal-editadd2) .customer-close-button:hover { color: var(--modal-text); background: var(--modal-soft); } /* Dark mode */ html.dark-mode :is(#modal-editadd, #modal-editadd2) .customer-section { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24); } /* Responsive */ @media (max-width: 991.98px) { :is(#modal-editadd, #modal-editadd2) .customer-info-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-4, :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-3 { grid-column: span 6; } :is(#modal-editadd, #modal-editadd2) .customer-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767.98px) { :is(#modal-editadd, #modal-editadd2) .modal-dialog { width: calc(100% - 16px); margin: 8px auto; } :is(#modal-editadd, #modal-editadd2) .modal-content { border-radius: 15px; } :is(#modal-editadd, #modal-editadd2) .modal-header { min-height: 66px; padding: 12px 14px; } :is(#modal-editadd, #modal-editadd2) .modal-heading-icon { width: 36px; height: 36px; flex-basis: 36px; } :is(#modal-editadd, #modal-editadd2) .modal-title { font-size: 0.95rem; } :is(#modal-editadd, #modal-editadd2) .modal-subtitle { display: none; } :is(#modal-editadd, #modal-editadd2) .modal-body { max-height: calc(100vh - 135px); padding: 12px; } :is(#modal-editadd, #modal-editadd2) .customer-section { padding: 14px; margin-bottom: 14px; border-radius: 13px; } :is(#modal-editadd, #modal-editadd2) .customer-section-header { align-items: flex-start; } :is(#modal-editadd, #modal-editadd2) .section-badge { display: none; } :is(#modal-editadd, #modal-editadd2) .customer-profile-card { padding: 11px; } :is(#modal-editadd, #modal-editadd2) .customer-detail { padding: 16px 0 0; } :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-12, :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-6, :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-4, :is(#modal-editadd, #modal-editadd2) .customer-info-item.cus-col-3, :is(#modal-editadd, #modal-editadd2) .customer-info-item--full { grid-column: span 12; } :is(#modal-editadd, #modal-editadd2) .customer-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } :is(#modal-editadd, #modal-editadd2) .modal-footer { padding: 10px 12px; } :is(#modal-editadd, #modal-editadd2) .customer-close-button { width: 100%; } } @media (max-width: 420px) { :is(#modal-editadd, #modal-editadd2) .customer-gallery { grid-template-columns: 1fr; } } /* ========================================================= ATTENDANCE PHOTO POPUP Uses the shared theme tokens above for both light/dark mode. ========================================================= */ .attendance-popup { --attendance-head:var(--ui-head); --attendance-row:var(--ui-bg); --attendance-row-alt:var(--ui-soft); --attendance-hover:var(--ui-hover); --attendance-text:var(--ui-text); --attendance-muted:var(--ui-muted); --attendance-border:var(--ui-border); background:rgba(15,23,42,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); color:var(--attendance-text); padding:20px; } .attendance-popup .attendance-card { background:var(--ui-bg); border:1px solid var(--attendance-border); border-radius:14px; box-shadow:0 20px 60px rgba(15,23,42,.24); max-height:min(86vh,700px); max-width:1050px; overflow:hidden; padding:0; position:relative; width:calc(100% - 24px); } html.dark-mode .attendance-popup .attendance-card { box-shadow:0 24px 70px rgba(0,0,0,.58); } .attendance-popup .attendance-scroll { max-height:min(86vh,700px); overflow:auto; overscroll-behavior:contain; scrollbar-color:var(--attendance-border) transparent; } .attendance-popup .attendance-table { background:var(--attendance-row); border-collapse:separate!important; border-spacing:0; color:var(--attendance-text)!important; margin:0!important; min-width:680px; width:100%; } .attendance-popup .attendance-table th, .attendance-popup .attendance-table td { border:0!important; border-bottom:1px solid var(--attendance-border)!important; border-right:1px solid var(--attendance-border)!important; padding:12px 14px; text-align:center; vertical-align:middle!important; } .attendance-popup .attendance-table tr > :last-child { border-right:0!important; } .attendance-popup .attendance-table thead { background:var(--attendance-head)!important; color:var(--attendance-text)!important; position:sticky; top:0; z-index:5; } .attendance-popup .attendance-table thead th { background:var(--attendance-head)!important; font-size:.82rem; font-weight:700; letter-spacing:.02em; } .attendance-popup .attendance-table .attendance-title th { background:linear-gradient(135deg,var(--ui-head),var(--ui-soft))!important; color:var(--attendance-text)!important; font-size:1rem; padding:15px 54px 15px 18px; } .attendance-popup .attendance-table tbody tr { background:var(--attendance-row)!important; transition:background-color .16s ease; } .attendance-popup .attendance-table tbody tr:nth-child(even) { background:var(--attendance-row-alt)!important; } .attendance-popup .attendance-table tbody tr:hover { background:var(--attendance-hover)!important; } .attendance-popup .attendance-table tbody td { background:transparent!important; color:var(--attendance-text)!important; font-size:.84rem; } .attendance-popup .attendance-date { color:var(--attendance-muted)!important; font-weight:600; white-space:nowrap; } .attendance-popup .attendance-time { color:var(--attendance-muted); display:block; font-size:.75rem; line-height:1.4; margin-bottom:8px; text-align:center; white-space:nowrap; } .attendance-popup .attendance-image { background:var(--ui-soft); border:1px solid var(--attendance-border); border-radius:9px; box-shadow:0 3px 10px rgba(15,23,42,.10); cursor:zoom-in; display:block; height:auto; margin:0 auto; max-height:100px; object-fit:cover; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; width:auto; } .attendance-popup .attendance-image:hover { border-color:var(--ui-primary); box-shadow:0 7px 18px var(--ui-primary-soft); transform:translateY(-2px) scale(1.03); } .attendance-popup .attendance-empty { color:var(--attendance-muted)!important; } .attendance-popup .btn-exit { align-items:center; border-radius:50%!important; box-shadow:0 5px 14px rgba(220,38,38,.24)!important; display:flex; height:34px; justify-content:center; padding:0!important; position:absolute; right:12px; top:10px; width:34px; z-index:10; } @media (max-width:767.98px) { .attendance-popup {padding:8px;} .attendance-popup .attendance-card { border-radius:11px; max-height:92vh; width:100%; } .attendance-popup .attendance-scroll {max-height:92vh;} .attendance-popup .attendance-table th, .attendance-popup .attendance-table td {padding:9px 10px;} }