/* =====================================================================
   wv-components — the shared pieces every premium screen was rebuilding
   for itself.
   ---------------------------------------------------------------------
   Before this file the app carried three hand-rolled drawers
   (EmpLoyee/Attendance, Project/ProjectDocs, rentcar/Drivers), three
   hand-rolled modals, and 4,575 CSS rules inlined across 82 of the 206
   view files — every panel, card, badge and table re-declared per page.
   Adding a fourth drawer meant a fourth copy of the same 40 lines.

   Everything here is driven by CSS custom properties that header.php
   emits once from config/company.php, so a re-skin still reaches these
   components without a single PHP echo inside the file — which is what
   lets it be a STATIC file the browser can cache.

   Loaded globally by header.php. Nothing here is scoped to one screen,
   and nothing here overrides the old theme: every class is namespaced
   `wv-`, so it can only affect markup that opts in.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DRAWER — a panel that slides in from the right.

   A drawer rather than a centre modal wherever the list behind it is
   still worth seeing: naming a work against the works already there,
   editing a bill while its row stays in view. The markup is emitted by
   wv_drawer_start() / wv_drawer_end() (oop/Ui.php) and driven by
   js/wv-drawer.js.
   --------------------------------------------------------------------- */
.wv-drawer{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;z-index:9999;visibility:hidden;}
.wv-drawer.is-open{visibility:visible;}

.wv-drawer-back{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;
                background:rgba(15,23,42,.5);opacity:0;transition:opacity .24s ease;
                backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.wv-drawer.is-open .wv-drawer-back{opacity:1;}

.wv-drawer-panel{position:absolute;top:0;right:0;bottom:0;
                 width:var(--wv-drawer-w,460px);max-width:calc(100% - 16px);
                 background:#fff;box-shadow:-24px 0 64px rgba(10,15,30,.26);
                 display:flex;flex-direction:column;
                 transform:translateX(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);}
.wv-drawer.is-open .wv-drawer-panel{transform:translateX(0);}
/* Wide variant for the document forms. A bill or quotation carries an item grid —
   product, challan no, unit, qty, rate, amount — and at 880px those columns wrapped and
   the form read worse in the drawer than on its own page, which defeats the point.
   min() keeps it near-full-screen on a laptop and still inset on a large monitor. */
.wv-drawer.wv-wide .wv-drawer-panel{width:var(--wv-drawer-w,min(1240px,94vw));}
/* Widest — for the four document forms specifically. */
.wv-drawer.wv-xwide .wv-drawer-panel{width:var(--wv-drawer-w,min(1480px,97vw));}

/* The head carries a hairline of the brand colour: enough to place the panel as part of
   the app without competing with the form inside it. */
.wv-drawer-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
                padding:15px 22px;border-bottom:1px solid #eef1f6;
                background:linear-gradient(180deg,#fff,#fbfcfe);
                box-shadow:inset 0 3px 0 var(--wv-acc,#166534);}
.wv-drawer-head h4{margin:0;font-size:16.5px;font-weight:800;color:#1f2733;line-height:1.25;
                   letter-spacing:-.01em;}
.wv-drawer-head .sub{font-size:11.5px;color:#8a92a6;display:block;font-weight:600;margin-top:3px;}
.wv-drawer-head .btn-mini{border-radius:7px;font-size:11.5px;padding:3px 10px;}
.wv-drawer-head .wv-x{margin-left:auto;font-size:24px;line-height:1;color:#b3bacb;
                      text-decoration:none;padding:0 2px;}
.wv-drawer-head .wv-x:hover{color:#5a6172;text-decoration:none;}

.wv-drawer-body{padding:20px 22px;overflow-y:auto;flex:1 1 auto;}
.wv-drawer-foot{display:flex;justify-content:flex-end;gap:8px;flex:0 0 auto;
                padding:14px 22px;background:#fafbfc;border-top:1px solid #eef1f6;}

/* ---------------------------------------------------------------------
   CENTRED variant — a modal, not a drawer.

   Same markup, same controller, one extra class. A drawer is right when
   what is behind it still matters; a destructive confirm is the opposite
   — it wants the eye in the middle and nothing else to do. Sharing the
   component means Esc, the backdrop, the scroll lock and the focus
   behaviour are the ones already proven, instead of a fourth hand-rolled
   dialog.
   --------------------------------------------------------------------- */
.wv-drawer.wv-center .wv-drawer-panel{
    position:relative;top:auto;right:auto;bottom:auto;
    width:var(--wv-drawer-w,540px);max-width:calc(100% - 24px);
    margin:9vh auto 0;max-height:82vh;border-radius:16px;
    box-shadow:0 28px 70px rgba(10,15,30,.34);
    transform:translateY(-14px) scale(.985);
    transition:transform .2s cubic-bezier(.32,.72,0,1),opacity .2s ease;opacity:0;}
.wv-drawer.wv-center.is-open .wv-drawer-panel{transform:translateY(0) scale(1);opacity:1;}
.wv-drawer.wv-center .wv-drawer-head{box-shadow:inset 0 3px 0 var(--wv-acc,#166534);}
/* A destructive confirm says so in the rule along its top. */
.wv-drawer.wv-center.wv-danger .wv-drawer-head{box-shadow:inset 0 3px 0 #c0392b;}
.wv-drawer.wv-center.wv-danger .wv-drawer-head h4{color:#a5281b;}

/* What a record holds, listed before it is destroyed. */
.wv-holds{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin:4px 0 14px;}
.wv-holds .h{border:1px solid #e6e9ef;border-radius:10px;padding:8px 11px;background:#fbfcfe;}
.wv-holds .h b{display:block;font-size:17px;font-weight:800;color:#1f2733;line-height:1.2;}
.wv-holds .h span{font-size:10.5px;color:#9aa2b4;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.wv-holds .h.zero b{color:#d5dbe6;}
.wv-note{border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.6;}
.wv-note.keep{background:#fff8ec;border:1px solid #f3ddb4;color:#92400e;}
.wv-note.gone{background:#fdeaea;border:1px solid #f6c9c9;color:#a5281b;}
.btn.wv-danger-btn{background:#c0392b !important;border-color:#c0392b !important;color:#fff !important;}
.btn.wv-danger-btn:hover{background:#a5281b !important;border-color:#a5281b !important;}


/* A chosen drop inside a scrolling panel gets clipped at the panel edge, so the picker in
   a confirm needs the room made for it. The results list caps its own height, and the body
   keeps a little padding below the field so a short list opens fully without scrolling. */
.wv-drawer.wv-center .wv-drawer-body{overflow-y:auto;padding-bottom:26px;}
.wv-drawer .chosen-container .chosen-results{max-height:210px !important;}
.wv-drawer .chosen-container-active.chosen-with-drop .chosen-single{border-bottom-left-radius:0;border-bottom-right-radius:0;}
/* chosen measures itself when it is built; inside a panel that starts hidden that comes out
   as a tiny square, so the width is forced whatever it measured. */
.wv-drawer .chosen-container{width:100% !important;}
.wv-drawer .chosen-container .chosen-drop{width:100% !important;box-sizing:border-box;}

/* The page must not scroll behind an open drawer — otherwise closing it
   returns you somewhere you never scrolled to. */
body.wv-drawer-lock{overflow:hidden;}

@media (max-width:640px){
    .wv-drawer-panel,
    .wv-drawer.wv-wide .wv-drawer-panel,
    .wv-drawer.wv-xwide .wv-drawer-panel{width:100%;max-width:100%;}
}

/* ---------------------------------------------------------------------
   FORM FIELDS inside a drawer.

   Deliberately scoped to .wv-drawer-body: the app still carries the old
   Bootstrap-2 form styles on every legacy page, and a global input rule
   would repaint all of them.
   --------------------------------------------------------------------- */
.wv-drawer-body .wv-fld{margin-bottom:15px;}
.wv-drawer-body label{display:block;font-size:10.5px;font-weight:800;color:#9aa2b4;
                      text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.wv-drawer-body label .opt{text-transform:none;font-weight:600;color:#b3bacb;letter-spacing:0;}
.wv-drawer-body input[type=text],
.wv-drawer-body input[type=number],
.wv-drawer-body input[type=date],
.wv-drawer-body input[type=email],
.wv-drawer-body select,
.wv-drawer-body textarea{
    width:100%;box-sizing:border-box;margin:0;
    border:1px solid #d5dbe6;border-radius:10px;padding:10px 12px;
    font-size:13.5px;line-height:1.5;background:#fff;color:#2f3646;height:auto;}
.wv-drawer-body textarea{resize:vertical;}
.wv-drawer-body input:focus,
.wv-drawer-body select:focus,
.wv-drawer-body textarea:focus{
    outline:none;border-color:var(--wv-acc,#166534);
    box-shadow:0 0 0 3px var(--wv-acc-soft,#e3ede7);}
.wv-drawer-body .wv-row{display:flex;gap:12px;}
.wv-drawer-body .wv-row > div{flex:1 1 0;min-width:0;}
.wv-drawer-body .wv-hint{font-size:11.5px;color:#9aa2b4;line-height:1.6;}
.wv-drawer-body .wv-err{font-size:12px;color:#b91c1c;font-weight:700;margin-top:8px;display:none;}
.wv-drawer-body .wv-err.is-on{display:block;}

/* chosen, when a drawer hosts one — it measures itself while the panel is
   still translated off-screen, so it needs the width forced. */
.wv-drawer-body .chosen-container,.wv-drawer-body .chzn-container{width:100% !important;}
.wv-drawer-body .chosen-single,.wv-drawer-body .chzn-single{
    height:40px !important;line-height:38px !important;padding:0 12px !important;
    border:1px solid #d5dbe6 !important;border-radius:10px !important;
    background:#fff !important;box-shadow:none !important;color:#2f3646 !important;}
.wv-drawer-body .chosen-drop,.wv-drawer-body .chzn-drop{
    border:1px solid #d7dce5 !important;border-radius:0 0 10px 10px !important;
    box-shadow:0 12px 28px rgba(20,30,60,.16) !important;}
.wv-drawer-body .chosen-results li.highlighted,
.wv-drawer-body .chzn-results li.highlighted{
    background:var(--wv-acc,#166534) !important;color:#fff !important;}