/* ============================================================
   Shared page + modal design system (Apple-minimal)
   Used by: serviceentry, chargecode, branchentry
   Pages opt in by adding class "jsrpage" to the page wrapper and
   including apppage.css + appmodal.js.
   ============================================================ */

/* ---- tokens ---- */
.jsrpage{ --accent:#fd8e19; --ink:#1d1d1f; --muted:#86868b; --line:#ededef; --field:#f5f5f7; }

/* ---- page header: icon tile + title ---- */
.jsrpage .pagetitle{ display:flex; align-items:center; gap:16px; font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.021em; }
.jsrpage .pagetitle img{ display:none; }
.jsrpage .pagetitle > i{ flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:22px; color:var(--accent); background:linear-gradient(160deg, rgba(253,142,25,.16), rgba(253,142,25,.06)); box-shadow:inset 0 0 0 1px rgba(253,142,25,.18); }

/* ---- header buttons ---- */
.jsrpage .btn-generate{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:10px; font-weight:500; font-size:14px; color:#fff; background:var(--accent); border:0; box-shadow:none; transition:filter .15s, transform .1s; white-space:nowrap; }
.jsrpage .btn-generate:hover{ filter:brightness(.96); }
.jsrpage .btn-generate:active{ transform:scale(.98); }
.jsrpage .btn-generate.btn-soft{ background:#f0f0f2; color:var(--ink); }
.jsrpage .btn-generate.btn-soft:hover{ filter:brightness(.97); }

/* ---- DataTable as a soft card ---- */
.jsrpage div.dataTables_wrapper, .jsrpage #resultTable_wrapper{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.03); padding:16px 18px; overflow-x:auto; }
.jsrpage #resultTable{ border-collapse:separate; border-spacing:0; }
.jsrpage table.dataTable thead th{ border-bottom:1px solid var(--line) !important; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.02em; padding:10px 12px; background:#fff !important; }
.jsrpage table.dataTable tbody td{ border-bottom:1px solid var(--line); padding:11px 12px; font-size:13px; color:var(--ink); }
.jsrpage table.dataTable tbody tr{ cursor:pointer; transition:background .12s; }
.jsrpage table.dataTable tbody tr:hover td{ background:var(--field); }
.jsrpage table.dataTable.display tbody tr.odd td, .jsrpage table.dataTable.stripe tbody tr.odd td{ background:transparent; box-shadow:none; }
.jsrpage .dataTables_filter input, .jsrpage .dt-search input, .jsrpage .dataTables_length select, .jsrpage .dt-length select{ border:1px solid transparent; background:var(--field); border-radius:9px; padding:7px 12px; outline:none; color:var(--ink); margin:0 4px; }
.jsrpage .dataTables_filter input:focus, .jsrpage .dt-search input:focus{ background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px rgba(253,142,25,.15); }
.jsrpage .dataTables_info, .jsrpage .dt-info{ color:var(--muted); font-size:12.5px; }
.jsrpage .paginate_button, .jsrpage .dt-paging button{ border-radius:8px !important; }
.jsrpage .dataTables_paginate .paginate_button.current, .jsrpage .dt-paging button.current{ background:var(--accent) !important; border:0 !important; color:#fff !important; }
.jsrpage #resultTable_filter .chosen-container-single .chosen-single{ height:36px; border-radius:9px; border:1px solid transparent; background:var(--field); box-shadow:none; padding:7px 12px; color:var(--ink); }
.jsrpage #resultTable_filter .chosen-container-single .chosen-single div b{ margin-top:4px; }

/* ============================================================
   App modal — replaces the narrow right drawer on opted-in pages.
   The global openViewPanel1/closeViewPanel1 drawer is untouched.
   overflow:visible so Chosen dropdowns are never clipped; the
   backdrop scrolls instead of an inner scroll container.
   ============================================================ */
.app-modal-bg{ --accent:#fd8e19; --ink:#1d1d1f; --muted:#86868b; --line:#ededef; --field:#f5f5f7;
	position:fixed; inset:0; z-index:3000; display:none; align-items:flex-start; justify-content:center;
	padding:5vh 16px; background:rgba(20,20,22,.45); overflow-y:auto; }
.app-modal-bg.show{ display:flex; animation:appFade .18s ease; }
.app-modal{ width:100%; max-width:560px; background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.28); display:flex; flex-direction:column; overflow:visible; animation:appPop .22s cubic-bezier(.2,.8,.2,1); }
.app-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line); border-radius:18px 18px 0 0; }
.app-modal-title{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.012em; }
.app-modal-close{ flex:0 0 auto; width:34px; height:34px; border:0; border-radius:9px; background:#f0f0f2; color:#6b7078; display:grid; place-items:center; cursor:pointer; font-size:15px; transition:background .15s, color .15s; }
.app-modal-close:hover{ background:#e7e7ea; color:var(--ink); }
.app-modal-body{ padding:20px 24px 14px; }
@keyframes appFade{ from{opacity:0} to{opacity:1} }
@keyframes appPop{ from{opacity:0; transform:translateY(8px) scale(.985)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .app-modal-bg.show, .app-modal{ animation:none; } }

/* ---- modal content: standardized ---- */
#appModalContent{ --accent:#fd8e19; --ink:#1d1d1f; --muted:#86868b; --line:#ededef; --field:#f5f5f7; }
#appModalContent img{ display:none; }
#appModalContent .text-center.py-3{ display:none; }
#appModalContent .font-18.font-weight-bold{ font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.012em; }
#appModalContent span[style*="#ef871a"]{ background:var(--accent) !important; border-radius:7px !important; padding:3px 10px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.05em; text-transform:uppercase; }
#appModalContent .border{ border:1px solid var(--line) !important; border-radius:14px !important; background:#fff !important; }
#appModalContent .text-right{ text-align:right !important; }
/* form labels (plain text col-12 blocks) */
#appModalContent .col-12 > .col-12:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(button)):not(:has(.row)):not(.row):not(.align-self-end){ font-weight:600; font-size:13px; color:var(--ink); margin-bottom:6px; }

/* ---- label : value rows inside a card (view screens) ---- */
#appModalContent .border .py-1, #appModalContent .border .border-bottom{ border-bottom:1px solid var(--line) !important; padding-top:9px !important; padding-bottom:9px !important; }
#appModalContent .border > div:last-child .py-1, #appModalContent .border > .py-1:last-child, #appModalContent .border > .border-bottom:last-child{ border-bottom:0 !important; }
#appModalContent .py-1 .text-right{ color:var(--muted) !important; font-weight:500; }

/* ---- inputs / selects ---- */
#appModalContent .form-control{ border-radius:10px; border:1px solid transparent; background:var(--field); box-shadow:none; height:42px; color:var(--ink); padding:0 14px; }
#appModalContent textarea.form-control{ height:auto; padding:9px 14px; }
#appModalContent input[type=file].form-control{ height:auto; padding:9px 14px; }
#appModalContent .form-control:focus{ background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px rgba(253,142,25,.15); }
#appModalContent select.form-control{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:0 34px 0 14px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; }

/* ---- chosen ---- */
#appModalContent .chosen-container{ width:100% !important; }
#appModalContent .chosen-container-single .chosen-single{ height:42px; border-radius:10px; border:1px solid transparent; background:var(--field); box-shadow:none; padding:10px 14px; color:var(--ink); }
#appModalContent .chosen-container-single .chosen-single span{ line-height:22px; }
#appModalContent .chosen-container-single .chosen-single div b{ margin-top:6px; }
#appModalContent .chosen-container-active .chosen-single{ background:#fff !important; border-color:var(--accent) !important; box-shadow:0 0 0 4px rgba(253,142,25,.15) !important; }
#appModalContent .chosen-container-active.chosen-with-drop .chosen-single{ border-radius:10px 10px 0 0; }
#appModalContent .chosen-container .chosen-drop{ border-color:#e3e3e7; border-radius:0 0 10px 10px; box-shadow:0 8px 30px rgba(0,0,0,.10); }
#appModalContent .chosen-container .chosen-search input{ border-radius:8px; border:1px solid #e3e3e7; outline:none; }
#appModalContent .chosen-container .chosen-results li.highlighted{ background:var(--accent); }
/* bootstrap-select (e.g. permission assign staff picker) */
#appModalContent .bootstrap-select > .dropdown-toggle{ background:var(--field) !important; border:1px solid transparent !important; border-radius:10px !important; height:42px; color:var(--ink) !important; box-shadow:none !important; }
/* form-switch toggles keep their look; just don't inherit stray margins */
#appModalContent .form-switch{ margin:0; }

/* ---- file dropzone ---- */
#appModalContent .filedrop{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; padding:26px 20px; border:1.5px dashed #d5d5da; border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; margin:0; }
#appModalContent .filedrop:hover{ border-color:var(--accent); background:rgba(253,142,25,.05); }
#appModalContent .filedrop-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(30,157,85,.12); color:#1f9d55; font-size:18px; margin-bottom:3px; }
#appModalContent .filedrop-main{ font-size:14px; font-weight:600; color:var(--ink); }
#appModalContent .filedrop-main .lnk{ color:var(--accent); }
#appModalContent .filedrop-sub{ font-size:12px; color:var(--muted); word-break:break-all; }
#appModalContent .filedrop input[type=file]{ display:none; }

/* ---- footer: right-aligned compact buttons, divider with breathing room ---- */
#appModalContent .align-self-end{ margin:16px 0 0 !important; padding:16px 0px 16px !important; border-top:1px solid var(--line); }
#appModalContent .align-self-end .row{ padding:0 !important; margin:0 !important; }
#appModalContent .align-self-end.row, #appModalContent .align-self-end .row{ display:flex; justify-content:flex-end !important; align-items:center; gap:10px; }
#appModalContent .align-self-end [class*="col"]{ flex:0 0 auto !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; }
#appModalContent .align-self-end .btn{ width:auto !important; min-width:0 !important; height:38px !important; padding:0 18px !important; font-size:13.5px !important; display:inline-flex; align-items:center; justify-content:center; }
#appModalContent .btn.btn-primary{ background:var(--accent) !important; border:0 !important; border-radius:10px !important; color:#fff !important; font-weight:500; box-shadow:none !important; }
#appModalContent .btn.btn-primary:hover{ filter:brightness(.96); }
#appModalContent .btn.btn-secondary{ background:#f0f0f2 !important; border:0 !important; border-radius:10px !important; color:var(--ink) !important; font-weight:500; box-shadow:none !important; }
#appModalContent .btn.btn-secondary:hover{ filter:brightness(.97); }