/* ==========================================================================
   Kooba panel — shared refinement layer
   --------------------------------------------------------------------------
   Loaded after the theme stylesheets, so every panel screen picks these up
   without touching a hundred view files. It refines what is already there —
   spacing, weight, alignment, focus — rather than introducing a new look.

   Scoped to #main-content wherever possible so the sidebar, top bar and
   login screens keep their own styling.
   ========================================================================== */

:root {
    --kb-accent:      #00bcd4;
    --kb-accent-dark: #0097a7;
    --kb-ink:         #1f2933;
    --kb-muted:       #7b8794;
    --kb-faint:       #9aa7b4;
    --kb-line:        #e7ecf1;
    --kb-line-soft:   #f2f5f8;
    --kb-danger:      #c62828;
    --kb-warn:        #b26a00;
    --kb-ok:          #1e7d47;
}

/* --------------------------------------------------------------------------
   Form controls
   Inputs sat at differing heights and readonly date fields rendered as flat
   grey slabs that read as "disabled" rather than "click to pick a date".
   -------------------------------------------------------------------------- */
#main-content .form-control {
    height: 38px;
    padding: 7px 12px;
    font-size: 13.5px;
    color: var(--kb-ink);
    background-color: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
#main-content textarea.form-control { height: auto; }
#main-content select.form-control    { height: 38px; }

#main-content .form-control:focus {
    border-color: var(--kb-accent);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, .14);
    outline: 0;
}
#main-content .form-control::placeholder { color: var(--kb-faint); }

/* Readonly date pickers are still actionable — show that. */
#main-content .input-daterange .form-control[readonly],
#main-content .form-control[readonly].datepicker {
    background-color: #fff;
    cursor: pointer;
}
#main-content .form-control[disabled] {
    background-color: #f4f7fa;
    color: var(--kb-faint);
    cursor: not-allowed;
}

#main-content label { font-weight: 500; color: #4a5866; font-size: 13px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
#main-content .btn {
    height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    line-height: 36px;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
#main-content .btn-sm, #main-content .btn-xs {
    height: 30px; line-height: 28px; padding: 0 10px; font-size: 12.5px;
}
#main-content .btn:focus, #main-content .btn:active:focus {
    outline: 2px solid var(--kb-accent-dark);
    outline-offset: 2px;
    box-shadow: none;
}
#main-content .btn-primary {
    background-color: var(--kb-accent);
    border-color: var(--kb-accent);
    color: #fff;
}
#main-content .btn-primary:hover, #main-content .btn-primary:focus {
    background-color: var(--kb-accent-dark);
    border-color: var(--kb-accent-dark);
}
#main-content .btn-default {
    background-color: #fff;
    border-color: #dbe2ea;
    color: #4a5866;
}
#main-content .btn-default:hover {
    background-color: #f7fafc;
    border-color: #c6d0da;
    color: var(--kb-ink);
}

/* Icon-only export/import buttons: heavy filled blocks with no label read as
   primary actions competing with Filter. Quieten them to outline. */
#main-content .box-header .btn > .fa-2x { font-size: 15px; }
#main-content .box-header .btn-primary:has(> .fa-file-excel-o),
#main-content .box-header .btn-primary:has(> .fa-file-pdf-o),
#main-content .box-header .btn-primary:has(> .fa-upload) {
    background-color: #fff;
    border-color: #dbe2ea;
    color: #4a5866;
    width: 38px; padding: 0;
}
#main-content .box-header .btn-primary:has(> .fa-file-excel-o):hover { color: #1e7d47; border-color: #9fd3b4; }
#main-content .box-header .btn-primary:has(> .fa-file-pdf-o):hover   { color: var(--kb-danger); border-color: #f0b6b2; }
#main-content .box-header .btn-primary:has(> .fa-upload):hover       { color: var(--kb-accent-dark); border-color: #9adfe9; }

/* Toolbar row: line the filter controls and the export cluster up on one
   baseline instead of letting pull-right float them apart. */
#main-content .box-header.row.input-daterange {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 0 4px;
}
#main-content .box-header.row.input-daterange > [class^="col-"] {
    float: none; width: auto; padding: 0; margin: 0;
}
#main-content .box-header.row.input-daterange > .pull-right { margin-left: auto; }
#main-content .box-header .pull-right .btn { float: none; margin-left: 6px; }

/* --------------------------------------------------------------------------
   Data tables
   -------------------------------------------------------------------------- */
#main-content table.dataTable,
#main-content .table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
#main-content table.dataTable thead th,
#main-content .table > thead > th,
#main-content .table > thead > tr > th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kb-muted);
    background: #fbfcfd;
    border-bottom: 1px solid var(--kb-line);
    border-top: 0;
    padding: 11px 14px;
    white-space: nowrap;
    vertical-align: middle;
}
#main-content table.dataTable tbody td,
#main-content .table > tbody > tr > td {
    padding: 11px 14px;
    border-top: 1px solid var(--kb-line-soft);
    color: var(--kb-ink);
    vertical-align: middle;
    line-height: 1.45;
}
#main-content table.dataTable tbody tr:hover td,
#main-content .table-hover > tbody > tr:hover > td { background: #f7fbfd; }

/* Dates, accession numbers and money line up when the digits are monospaced
   in width. Applied to whole tables — proportional digits in a column of
   figures is the single most common reason a table looks untidy. */
#main-content table.dataTable tbody td { font-variant-numeric: tabular-nums; }

#main-content .dataTables_wrapper .dataTables_length select,
#main-content .dataTables_wrapper .dataTables_filter input {
    height: 34px; padding: 4px 10px; font-size: 13px;
    border: 1px solid #dbe2ea; border-radius: 6px; background: #fff;
}
#main-content .dataTables_wrapper .dataTables_filter input:focus,
#main-content .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--kb-accent);
    box-shadow: 0 0 0 3px rgba(0,188,212,.14);
    outline: 0;
}
#main-content .dataTables_wrapper .dataTables_length,
#main-content .dataTables_wrapper .dataTables_filter,
#main-content .dataTables_wrapper .dataTables_info { color: var(--kb-muted); font-size: 13px; }

#main-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 11px; margin-left: 3px; border-radius: 6px;
    border: 1px solid var(--kb-line); background: #fff; color: #4a5866 !important;
}
#main-content .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--kb-accent) !important; border-color: var(--kb-accent);
    color: #fff !important;
}
#main-content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #c3ccd6 !important; background: #fff; border-color: var(--kb-line-soft);
}

/* Row action buttons: keep them together and let them breathe. */
#main-content table.dataTable td .btn + .btn,
#main-content .table td .btn + .btn { margin-left: 4px; }

/* --------------------------------------------------------------------------
   Status pills
   Circulation status was printed as bare lowercase text ("pending"), which
   carries no signal at a glance. These give each state a shape and a colour,
   with red kept for the states that need someone to act.
   -------------------------------------------------------------------------- */
.kb-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.6;
    white-space: nowrap;
}
.kb-pill-open     { background: #e6f6fa; color: #0b7285; }  /* borrowed, in date */
.kb-pill-late     { background: #fdecea; color: var(--kb-danger); }
.kb-pill-done     { background: #e9f7ef; color: var(--kb-ok); }
.kb-pill-lost     { background: #f3eef7; color: #6a3d9a; }
.kb-pill-neutral  { background: #f0f3f6; color: #5b6b7b; }
.kb-pill-warn     { background: #fff4e0; color: var(--kb-warn); }
.kb-pill em { font-style: normal; opacity: .75; font-weight: 500; }

/* --------------------------------------------------------------------------
   Cards / page furniture
   -------------------------------------------------------------------------- */
#main-content .card {
    border: 1px solid var(--kb-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(31, 41, 51, .04);
}
#main-content .card > .body { padding: 20px 22px; }

/* Modals across the panel */
.modal-content { border: 0; border-radius: 10px; box-shadow: 0 12px 34px rgba(31,41,51,.18); }
.modal-header  { border-bottom: 1px solid var(--kb-line); padding: 16px 22px; }
.modal-title   { font-size: 16px; font-weight: 600; color: var(--kb-ink); }
.modal-body    { padding: 20px 22px; }
.modal-footer  { border-top: 1px solid var(--kb-line); padding: 14px 22px; }

/* Alerts */
#main-content .alert {
    border: 1px solid transparent; border-radius: 8px;
    padding: 12px 16px; font-size: 13.5px;
}
#main-content .alert-success { background: #e9f7ef; border-color: #bfe6cf; color: var(--kb-ok); }
#main-content .alert-danger  { background: #fdecea; border-color: #f6c9c4; color: var(--kb-danger); }
#main-content .alert-warning { background: #fff4e0; border-color: #f5dcae; color: var(--kb-warn); }
#main-content .alert-info    { background: #e6f6fa; border-color: #b6e3ec; color: #0b7285; }

@media print {
    #main-content .box-header,
    #main-content .dataTables_wrapper .dataTables_length,
    #main-content .dataTables_wrapper .dataTables_filter,
    #main-content .dataTables_wrapper .dataTables_paginate { display: none !important; }
}

/* --------------------------------------------------------------------------
   Reflowing field grid
   Forms here are built as fixed Bootstrap rows of col-md-6 pairs. Hide one
   field of a pair and its half of the row stays behind as a hole, so turning
   fields off in Settings > Form Fields left the form looking broken rather
   than tidier.
   The row/col wrappers are flattened with display:contents so every
   .form-group becomes a direct grid child and the remaining fields simply
   pack together. Nothing about the markup changes - only how it lays out.
   -------------------------------------------------------------------------- */
#main-content .kb-fieldgrid {
    display: grid;
    /* Exactly two columns, matching the col-md-6 pairs this replaces. auto-fill
       was letting the grid decide, which made it three-up on a wide screen and
       no longer looked like the rest of the app. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
}
#main-content .kb-fieldgrid > .row,
#main-content .kb-fieldgrid > .row > [class*="col-"] { display: contents; }
#main-content .kb-fieldgrid > .form-group,
#main-content .kb-fieldgrid > .row > [class*="col-"] > .form-group,
#main-content .kb-fieldgrid > .row > [class*="col-"] > p,
#main-content .kb-fieldgrid > p { min-width: 0; margin-bottom: 16px; }

/* A field that must keep the full width of the form (a long note, a picker
   that needs the room) can opt out. */
#main-content .kb-fieldgrid .kb-span-all { grid-column: 1 / -1; }

@media (max-width: 767px) {
    #main-content .kb-fieldgrid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Sidebar menu rows
   The expand chevron is marked up as `pull-right`, i.e. a float. A float only
   sits beside the label while the label fits on one line - so "Notify
   Members", "Requested Books" and "Website Manager" wrapped and dropped their
   chevron onto a line of its own, which read as a stray button.
   Laying the row out with flex pins the chevron to the right edge whatever
   the label does, and lets the label ellipsis instead of wrapping.
   -------------------------------------------------------------------------- */
#left-sidebar .metismenu a {
    display: flex;
    align-items: center;
    gap: 10px;
}
#left-sidebar .metismenu a > i:first-child { flex: 0 0 auto; }
#left-sidebar .metismenu a > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The chevron: no longer floated, always last, never wrapping. */
#left-sidebar .metismenu a > i.fa-angle-left,
#left-sidebar .metismenu a > i.pull-right {
    float: none !important;
    flex: 0 0 auto;
    margin-left: auto;
    transition: transform .18s ease;
}
/* Point it down when the section is open, so the arrow states what it did. */
#left-sidebar .metismenu li.active > a > i.fa-angle-left { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   Rows that have no chevron used to run their label the full width of the
   sidebar, while rows that do have one stopped short - so the same label
   started in the same place but ended in two different places, and the block
   read as ragged. A matching right gutter on every row lines them all up
   whether or not they can expand.
   -------------------------------------------------------------------------- */
#left-sidebar .metismenu > li > a { padding-right: 34px; position: relative; }
#left-sidebar .metismenu > li > a > i.fa-angle-left,
#left-sidebar .metismenu > li > a > i.pull-right {
    position: absolute;
    right: 14px;
    top: 50%;
    margin-left: 0;
    transform-origin: 50% 50%;
    margin-top: -0.5em;
}
#left-sidebar .metismenu > li.active > a > i.fa-angle-left {
    transform: rotate(-90deg);
}

/* Child rows: the same left gridline as their parent's label, and a bullet
   that is always the same size, so a section does not appear to shift when it
   opens. */
#left-sidebar .metismenu ul > li > a {
    padding-left: 46px;
    padding-right: 14px;
}
#left-sidebar .metismenu ul > li > a > i.fa-circle-o {
    font-size: 8px;
    width: 8px;
    text-align: center;
    opacity: .55;
}

/* --------------------------------------------------------------------------
   Two things the theme gets wrong on the sidebar, fixed here rather than in
   site.min.css so a theme update cannot quietly undo them. Written without a
   theme colour so all six skins behave the same.
   -------------------------------------------------------------------------- */

/* 1. The skin paints `li.active > a i` - EVERY icon in the open row, not just
      the leading one. The trailing chevron therefore picked up the same filled
      colour block as the icon, so the open section (and only the open section)
      grew a large coloured square on its right. The leading icon keeps its
      badge; the chevron is put back to a plain arrow. */
#left-sidebar .sidebar-nav .metismenu > li.active > a > i.fa-angle-left,
#left-sidebar .sidebar-nav .metismenu > li.active > a > i.pull-right,
#left-sidebar .metismenu > li.active > a > i.fa-angle-left,
#left-sidebar .metismenu > li.active > a > i.pull-right {
    background: none !important;
    color: inherit !important;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    line-height: 1;
}

/* 2. Child rows carry a decorative bar that is meant to grow on hover - the
      skin sets its colour, radius and transition but never its resting width,
      so it rendered as a permanent stub dash to the left of every bullet.
      Zero at rest is what the hover rule was always written against. */
#left-sidebar .metismenu ul a::before { width: 0; }
#left-sidebar .metismenu ul a:hover::before { width: calc(100% - 15px); }