/* ── Global font ──────────────────────────────────────────── */
@font-face {
    font-family: 'Phetsarath_OT';
    src: url('/build/icons/Phetsarath OT_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
* { font-family: 'Phetsarath_OT', sans-serif !important; }

/* ── Global font size ─────────────────────────────────────── */
/* 15px base for every theme. html[data-theme] outranks the per-theme
   [data-theme=…] values in app.min.css, which range from 13px to 14.5px. */
:root, html[data-theme] { --vz-font-base: 0.9375rem; }

/* The small-text classes (.fs-10 … .fs-16) were fixed sizes that ignored the
   base above. Scale them from it instead, relative to the theme's original
   13px base, so fs-12 stays "a bit smaller than body text" at any base. */
:root, html[data-theme] {
    --vz-font-10: calc(var(--vz-font-base) * 10 / 13);
    --vz-font-11: calc(var(--vz-font-base) * 11 / 13);
    --vz-font-12: calc(var(--vz-font-base) * 12 / 13);
    --vz-font-13: var(--vz-font-base);
    --vz-font-14: calc(var(--vz-font-base) * 14 / 13);
    --vz-font-15: calc(var(--vz-font-base) * 15 / 13);
    --vz-font-16: calc(var(--vz-font-base) * 16 / 13);
}

/* ── Sidebar toggle — fold / unfold swap ──────────────────── */
.hamburger-icon .ri-menu-fold-line   { display: inline-block; }
.hamburger-icon .ri-menu-unfold-line { display: none; }
.hamburger-icon.open .ri-menu-fold-line   { display: none; }
.hamburger-icon.open .ri-menu-unfold-line { display: inline-block; }

/* ── Sidebar logo ─────────────────────────────────────────── */
.navbar-brand-box {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    height: auto !important;
}
.logo-lg img {
    height: 100px !important;
}
[data-sidebar-size="sm"] .sidebar-version-wrap { display: none !important; }

[data-sidebar-size="sm"] .navbar-brand-box {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    height: auto !important;
}
/* Override app.min.css .logo { line-height: 70px } */
.logo {
    line-height: normal !important;
}

/* ── Sidebar flex layout — makes #scrollbar fill remaining height ── */
.navbar-menu {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}
.navbar-menu #scrollbar {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important; /* overrides Bootstrap h-100 (height:100%!important) */
}

/* ── Project view – file download list ───────────────────── */
.file-download-row:hover {
    background-color: rgba(0,0,0,.04) !important;
}
.file-download-row:hover a.btn-icon {
    color: var(--bs-primary) !important;
}

/* ── Project view – kanban tasks ─────────────────────────── */
.tasks-board {
    display: flex;
    gap: 14px;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 16px;
}

.tasks-list {
    background: #f3f6f9;
    border-radius: 10px;
    min-width: 320px;
    max-width: 320px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.tasks-wrapper {
    flex: 1;
    padding: 10px 10px 60px;
    min-height: 120px;
}

.kanban-col-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px 10px 0 0;
    cursor: default;
}
.kanban-todo   { background-color: #405189; }
.kanban-inprog { background-color: #f7b84b; }
.kanban-review { background-color: #878a99; }
.kanban-done   { background-color: #0ab39c; }

.kanban-col-title {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-grow: 1;
}
.kanban-col-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.tasks-box {
    border-radius: 8px;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    margin-bottom: 10px;
    transition: box-shadow .15s, transform .15s;
    background: #fff !important;
}
.tasks-box:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
    transform: translateY(-1px);
}
.ex-over {
    background-color: rgba(0,0,0,0.04) !important;
}
.tasks-box.ex-moved {
    background-color: #e9f7df !important;
}

/* Scope secondary background override to kanban member avatars only */
.tasks-box .avatar-title {
    background-color: var(--bs-secondary) !important;
}

/* Zoom only the page wrapper so elements appended directly to <body>
   (tooltips, popovers, modal backdrop) stay in unzoomed viewport space
   and Popper.js coordinates are not double-scaled. */
#layout-wrapper { zoom: 0.9; }

/* Prevent body from scrolling behind the modal */
body.modal-open {
    overflow: hidden !important;
}
#kanbanboard .tasks-list {
margin-right: 5px;

}

.tasks-board {
    gap: 0px!important;
}

/* ── Inline-editable fields (project & task views) ───────── */
.inline-editable {
    cursor: pointer;
    border-bottom: 1px dashed #adb5bd;
    transition: border-color .15s;
}
.inline-editable:hover {
    border-bottom-color: #405189;
}

.project-inline-edit-btn,
.task-inline-edit-btn {
    padding: 0;
    min-width: auto;
    line-height: 1;
}

/* ── Priority inline editor (choices.js) ─────────────────── */
#priority-editor .choices { margin-bottom: 0; }
#priority-editor .choices__inner { min-height: 28px; padding: 2px 24px 2px 8px; font-size: .8125rem; }
#priority-editor .choices__list--single { padding: 0; }
#priority-editor .choices[data-type*=select-one]::after { right: 8px; margin-top: -3px; }
#priority-editor .choices__list--dropdown .choices__item { padding: 6px 10px; font-size: .8125rem; }

/* ── Project view ────────────────────────────────────────── */
.card-header.border-0>.d-flex.align-items-center { min-height: 38px; }

#project-tab-content > .tab-pane:not(.active),
#tasksList > .tab-content > .tab-pane:not(.active) { display: none !important; }

body > .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1055 !important;
    display: none;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
}
body > .modal.show { display: block !important; }

/* ── Disabled flatpickr inputs (view/show mode) ──────────── */
.flatpickr-input[readonly][disabled] {
    background-color: #f3f6f9 !important;
    cursor: default !important;
}

/* ── Task status badge colours (shared: List / Kanban / Gantt) ── */
.badge-st-todo    { background-color: #405189; color: #fff; }
.badge-st-inprog  { background-color: #f7b84b; color: #fff; }
.badge-st-review  { background-color: #878a99; color: #fff; }
.badge-st-done    { background-color: #0ab39c; color: #fff; }

/* ── Gantt popup — allow pointer events so links/buttons work ── */
.gantt .popup-wrapper { pointer-events: auto !important; }

/* ── Role-based UI: hide edit controls for Members ───────── */
body[data-can-manage="0"] .project-inline-edit-btn,
body[data-can-manage="0"] .task-inline-edit-btn { display: none !important; }

body[data-can-manage="0"] .inline-editable {
    cursor: default !important;
    border-bottom: none !important;
    pointer-events: none;
}
/* ── Badges ──────────────────────────────────────────────────────────────
   Bootstrap sizes badges at .75em, which leaves Lao diacritics cramped and
   hard to read. Overriding the variable covers every .badge at once,
   including the ones built as HTML strings in page JS.
   --vz-font-12 is only defined inside [data-theme=...], which app.js applies at
   runtime, so it is undefined on first paint. The literal fallback keeps the
   size correct either way. */
.badge {
    --vz-badge-font-size: var(--vz-font-12, 0.75rem);
}

/* Clickable tag suggestions under the tag inputs on the drive pages. */
.tag-pick {
    cursor: pointer;
    user-select: none;
    transition: background-color .12s, border-color .12s;
}
.tag-pick:hover {
    background-color: var(--vz-primary-bg-subtle) !important;
    border-color: var(--vz-primary) !important;
}

/* Drive rows are opened by double-click, so suppress the text selection that
   a double-click would otherwise leave behind. */
.drive-row {
    user-select: none;
}

/* Attachment drop area, shared by the incoming register's create and edit
   forms. A dashed border needs all three properties — .border-bottom-dashed
   only sets border-style and would inherit currentColor for the rest.
   --vz-input-border-custom, not --vz-border-color: the latter is the
   fainter divider gray, and this is meant to read as a field, not a panel. */
.doc-drop {
    border: 1px dashed var(--vz-input-border-custom);
    border-radius: var(--vz-border-radius);
    padding: 1.5rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease;
}
.doc-drop:hover,
.doc-drop.is-dragging { border-color: var(--vz-primary); }
.doc-drop.is-invalid-drop { border-color: var(--vz-danger); }

/* The rest of a file section — the picked/attached/current-file boxes —
   uses Bootstrap's .border utility, which carries the same fainter
   --vz-border-color. Matching it to the dropzone above keeps the whole
   file section reading as one field-like control. */
#filePicked,
#currentFile,
.file-box {
    border-color: var(--vz-input-border-custom) !important;
}

/* Read-only fields look it: the grey that Bootstrap gives disabled inputs, no
   text cursor, no focus glow. .form-readonly marks a whole view-mode form
   (e.g. ລາຍລະອຽດເອກະສານ); .is-readonly marks one locked field on an edit
   form (e.g. ເລກທີຮັບ for non-admins). Not a bare [readonly] rule — flatpickr's
   date inputs are readonly too, but they are clickable pickers. */
.form-readonly .form-control,
.form-control.is-readonly {
    background-color: var(--vz-tertiary-bg);
    cursor: default;
}
.form-readonly .form-control:focus,
.form-control.is-readonly:focus {
    background-color: var(--vz-tertiary-bg);
    border-color: var(--vz-input-border-custom);
    box-shadow: none;
}

/* flatpickr's altInput replaces the real field, so it needs the same look. */
.flatpickr-input[readonly] { background-color: var(--vz-input-bg); cursor: pointer; }

/* Folder tree picker, in the style of a desktop file manager: one row per
   folder, a twisty for branches, indentation carried by padding so the whole
   row stays clickable across its full width. */
.folder-tree {
    max-height: 320px;
    overflow: auto;
    padding: .25rem 0;
    background: var(--vz-input-bg);
}
.folder-tree__row {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.folder-tree__row:hover { background: var(--vz-tertiary-bg); }
.folder-tree__row.is-selected { background: var(--vz-primary); color: #fff; }
.folder-tree__row.is-selected .text-muted { color: #fff !important; }
.folder-tree__row.is-locked { opacity: .5; cursor: not-allowed; }
.folder-tree__twisty {
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
    transition: transform .12s ease;
}
.folder-tree__twisty.is-open { transform: rotate(90deg); }
.folder-tree__children.is-collapsed { display: none; }

/* Right-click menu on the file-listing pages. It is a clone of the row's own
   dropdown, lifted out of the table so it can sit at the cursor. */
.row-context-menu {
    position: fixed;
    z-index: 1080;
    display: block;
    min-width: 200px;
}

/* A listing card sized to the viewport: the header and breadcrumb stay put
   while only the rows scroll, so the layout does not jump when a folder holds
   two files instead of two hundred. */
.fill-card {
    min-height: calc(100vh - var(--drive-chrome, 210px));
    display: flex;
    flex-direction: column;
}
/* Only the last card-body grows — pages like the incoming register put a
   filter bar in its own card-body above the table, and that must keep its
   natural height. */
.fill-card > .card-body {
    flex: 0 0 auto;
}
.fill-card > .card-body:last-of-type {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fill-card .drive-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
/* A Bootstrap .row hangs half a gutter outside its parent on each side, on the
   assumption that a .container is there to absorb it. In the icon views the
   scroll container *is* the parent and has no padding of its own, so those two
   overhangs stuck out — and because overflow-y:auto also turns overflow-x from
   visible into auto, they showed up as a horizontal scrollbar that never went
   away, however few items were on screen.

   Half a gutter of padding takes the overhang back, which also lands the cards
   flush with the table in list view rather than half a gutter wider. */
.fill-card .drive-grid-scroll {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Every date field flatpickr manages, everywhere. Member join date is the
   only one left plain — flatpickr marks that real field itself with this
   class, so targeting it directly is enough. Every other date field (search,
   incoming/outgoing, user logs) stores Y-m-d but
   shows d/m/Y via altInput, and there the class stays on the *original*
   field, which flatpickr turns into type="hidden" and hides; the field the
   user actually sees and clicks is a plain sibling inserted right after it,
   carrying no flatpickr-specific class of its own — reached below through
   that adjacency instead. */
.flatpickr-input {
    cursor: pointer;
}
.flatpickr-input[type="hidden"] + input[readonly] {
    cursor: pointer;
}