/*
 * Bridge: Paper Dashboard is Bootstrap 4, but the HR and Payroll screens are
 * written in the Bootstrap 3 / AdminLTE idiom (.box, .btn-default, .label,
 * .pull-right). Rather than rewrite every screen for each new theme, those
 * class names are mapped onto Paper's look here.
 */

/* AdminLTE box -> Paper card */
.box {
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .15);
    margin-bottom: 30px;
    padding: 0;
}
.box-header { padding: 15px 20px 0; border: none; }
.box-header .box-title { font-size: 1.05rem; font-weight: 400; color: #252422; margin: 0; }
.box-body { padding: 15px 20px 20px; }
.box-footer { padding: 0 20px 20px; background: transparent; border: none; }
.box.box-primary { border-top: none; }

/* Bootstrap 3 leftovers */
.pull-right { float: right; }
.pull-left { float: left; }
.text-red { color: #ef8157; }
.btn-default {
    color: #66615b;
    background: #fff;
    border: 1px solid #ddd;
}
.btn-default:hover { background: #f5f5f5; }
.btn-xs { padding: 3px 10px; font-size: .7rem; border-radius: 20px; }

/* BS3 .label -> Paper badge */
.label {
    display: inline-block;
    padding: .3em .7em;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 12px;
    line-height: 1;
}
.label-success { background: #e8f8f0; color: #6bd098; }
.label-default { background: #f4f3ef; color: #9a9a9a; }
.label-danger  { background: #fdeceb; color: #ef8157; }

/* Tables */
.table { color: #252422; }
.table thead th {
    border-top: 0;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    color: #9a9a9a;
    white-space: nowrap;
}
.table td, .table th { padding: 12px 8px; vertical-align: middle; }
.table-bordered, .table-bordered td, .table-bordered th { border: 0; }
.table-bordered td { border-top: 1px solid #f1f1f1; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table tbody tr:hover { background: #f9f9f9; }

/* Row actions read as links, not competing buttons. */
td .btn-primary.btn-xs {
    background: transparent; border-color: transparent; color: #51bcda; padding-left: 0;
}
td .btn-danger.btn-xs { background: transparent; border-color: transparent; color: #ef8157; }
td .btn-primary.btn-xs:hover, td .btn-danger.btn-xs:hover { text-decoration: underline; }

/* Forms */
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.form-inline .form-group { display: inline-flex; align-items: center; gap: .4rem; margin-right: .75rem; }
label { font-weight: 600; font-size: .75rem; color: #9a9a9a; text-transform: uppercase; }

/* Tabs */
.nav-tabs { border-bottom: 1px solid #ddd; }
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a {
    display: block; padding: .7rem 1.2rem; border: 0;
    border-bottom: 2px solid transparent; color: #9a9a9a; font-weight: 600;
}
.nav-tabs > li.active > a { color: #ef8157; border-bottom-color: #ef8157; }

/* Third sidebar level: the source menu is Module > Sub-category > Link. */
.sidebar .sub-menu-2 { padding-left: .5rem; }
.sidebar .sub-menu-2 li a .sidebar-normal { font-size: .78rem; opacity: .9; }
.sidebar .nav li.active > a { opacity: 1; }
.sidebar [data-menu-toggle] { cursor: pointer; }

/* Tailwind utilities still present on a few screens must not fight Paper. */
.text-gray-500, .text-gray-600 { color: #9a9a9a !important; }
.text-gray-800 { color: #252422 !important; }
.inline { display: inline; }

/* ---------- company mark ---------- */
/* Sized so it sits inside the sidebar's logo strip and the top bar without
   stretching either; the source image is 251x90. */
.sidebar .logo { text-align: center; }
.sidebar .logo .brand-logo { max-width: 150px; height: auto; margin: 0 auto; }
.sidebar .logo a.logo-normal { padding: 8px 0; }

/* ---------- pagination ---------- */
/* Paper ships no rule for .pagination, so the paginator would otherwise land
   in stock Bootstrap blue against a danger-accented shell. */
.pagination { margin: 0; flex-wrap: wrap; gap: 4px; }
.pagination .page-link {
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #66615b;
    padding: 4px 12px;
    font-size: .78rem;
    line-height: 1.6;
}
.pagination .page-link:hover { background: #f5f5f5; color: #ef8157; }
.pagination .page-item.active .page-link {
    background: #ef8157;
    border-color: #ef8157;
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: #ccc; background: #fff; }
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link { border-radius: 20px; }

/* ---------- filter bars ---------- */
/* Every screen's filter bar is a GET form -- the POST forms are the add/edit
   screens, where full-size controls belong. Filters are a dense strip above the
   grid, not a form to fill in, so they get their own compact scale: several
   fields to a line, and a card that does not push the data off the fold. */
form[method="GET"].box,
form[method="GET"].card {
    padding: 10px 12px;
    margin-bottom: 12px;
}
form[method="GET"] label {
    display: block;
    margin-bottom: 2px;
    font-size: .65rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .02em;
    color: #9a9a9a;
    text-transform: uppercase;
}
form[method="GET"] .form-control,
form[method="GET"] select,
form[method="GET"] input[type="text"],
form[method="GET"] input[type="date"],
form[method="GET"] input[type="month"],
form[method="GET"] input[type="number"] {
    /* 34px, the same as every other control in a filter bar — see the Forms
       block in hrms-theme.css. Two heights within one row is what made these
       bars look ragged. */
    height: 34px;
    padding: 3px 10px;
    font-size: .78rem;
    border-radius: 16px;
}
form[method="GET"] .btn {
    height: 34px;
    padding: 3px 18px;
    font-size: .78rem;
    line-height: 1.6;
    /* The theme gives every button `margin: 10px 1px`. In a filter bar that
       top margin alone dropped Submit below the field it belongs to; the
       spacing between buttons comes from the row's own gap. */
    margin: 0;
}
/* A filter grid written for 4 columns still reads as 4; the saving comes from
   the row being short, not from fewer fields per line. */
form[method="GET"].grid,
form[method="GET"] > .grid { gap: 8px 10px; }
/* Filters laid out with flex wrap to the same rhythm. */
form[method="GET"].flex { align-items: flex-end; row-gap: 8px; }
form[method="GET"] .form-group { margin-bottom: 0; }

/* ---------- wide data grids ---------- */
/* These are ERP grids: the employee report alone is fourteen columns, and a
   table that wide used to stretch the card, the content area and the panel
   with it, so the whole page went crooked once the data was real. The table
   now scrolls inside its own wrapper and the page stays put.

   Rows stay on one line -- a wrapped cell in a fourteen-column grid buys a
   little width at the cost of a very tall row, which is the same mess in the
   other direction. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table td,
.table-responsive > .table th { white-space: nowrap; }
/* Anything genuinely long stays readable rather than pushing the grid wide. */
.table-responsive > .table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
/* A cell holding row actions must never be clipped or ellipsised. */
.table-responsive > .table td:last-child { max-width: none; overflow: visible; }
/* The scrollbar reads as part of the card, not a stray element. */
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }

/* ---------- page header ---------- */
/* Every source screen opens with the module name, the screen after a chevron,
   and a Help breadcrumb pinned right. */
.content-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.content-header h1 {
    font-size: 1.35rem;
    font-weight: 300;
    color: #252422;
    margin: 0;
}
.content-header h1 small { font-size: .95rem; color: #9a9a9a; }
.content-header .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    list-style: none;
    font-size: .78rem;
}
.content-header .breadcrumb a { color: #9a9a9a; }
.content-header .breadcrumb a:hover { color: #ef8157; }

/* A screen that is one of a family links its siblings in a strip above the
   grid, the current one shaded -- the source's second breadcrumb. */
.screen-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.screen-tabs a {
    padding: 5px 14px;
    border-radius: 16px;
    background: #f4f3ef;
    color: #66615b;
    font-size: .78rem;
}
.screen-tabs a:hover { background: #eceae4; text-decoration: none; }
.screen-tabs a.active { background: #ef8157; color: #fff; }

/* ---------- attendance register grid ---------- */
/* A month is 31 narrow columns, so the day cells are square-ish buttons and
   only the name column is allowed to be wide. */
.attendance-grid td, .attendance-grid th { padding: 4px; text-align: center; }
.attendance-grid th { font-size: .7rem; line-height: 1.1; }
/*
 * The name column stays put while the days scroll.
 *
 * A month is thirty-one columns, so the grid always scrolls sideways — and the
 * name went with it, which meant that three days in you could no longer tell
 * whose row you were clicking. Sticky keeps it against the left edge, and the
 * opaque background stops the day cells showing through as they pass under it.
 */
.attendance-grid .attendance-grid-name {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left;
    max-width: none;
    white-space: normal;
    width: 230px;
    min-width: 230px;
    background: #fdfde7;
    box-shadow: 1px 0 0 #e8e8d8;
}

.attendance-grid thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff;
    box-shadow: 1px 0 0 #e8e8d8;
}

/* The day numbers stay visible down a long department. */
.attendance-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}

/*
 * The two bulk actions sat side by side and the second was cut off, because
 * `.table-responsive > .table td` clips its cells so no single value can
 * stretch the grid. That clip has to stay — a sticky column must not spill
 * over the days passing under it — so the buttons stack instead, which fits
 * both inside the column and reads better besides.
 */
.attendance-grid .attendance-grid-name > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 5px;
}

.attendance-grid .attendance-grid-name > div .btn {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.attendance-grid .attendance-grid-name > div form { width: 100%; margin: 0; }
/*
 * A day is a target you click, not a label you read past: 26px squares were
 * small enough to miss. Wide enough for a finger, square so a month reads as a
 * grid rather than a line of text.
 */
.attendance-grid .attendance-cell {
    width: 30px;
    min-width: 30px;
    height: 28px;
    padding: 0;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
}

.attendance-grid td { padding: 3px 2px; }

/* A weekend column reads as one before anything is clicked. */
.attendance-grid .attendance-weekend { background: #fbfaf7; }

/* The scroller belongs to the grid, so sticky has something to stick inside. */
.attendance-grid-scroll {
    overflow: auto;
    max-height: 70vh;
}
/* AdminLTE colours the source's legend uses and Paper has no name for. */
.btn-maroon { background: #7c1f3d; border-color: #7c1f3d; color: #fff; }
.btn-od     { background: #7165ee; border-color: #7165ee; color: #fff; }
.attendance-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.attendance-legend .btn { cursor: default; }

/* The cell menu is positioned against the viewport: a menu inside the grid
   would be clipped by the horizontal scroller the grid lives in. */
#cell-menu {
    position: fixed;
    z-index: 1050;
    display: none;
    min-width: 170px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
#cell-menu a {
    display: block;
    padding: 6px 16px;
    font-size: .8rem;
    color: #66615b;
    white-space: nowrap;
}
#cell-menu a:hover { background: #f5f5f5; text-decoration: none; }
#cell-menu a.danger { color: #ef8157; }

/* ---------- day grids (Set Days, Working Hours, Holiday Master) ---------- */
/* Twelve months down, Sun..Sat across: the cells are square buttons whose
   colour carries the setting, so they need no text. */
.day-grid td, .day-grid th { padding: 4px 6px; text-align: center; vertical-align: middle; }
.day-grid .day-cell {
    width: 34px;
    min-width: 34px;
    height: 24px;
    padding: 0;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 600;
}
.day-grid .label { display: inline-block; margin: 1px; }

/* ---------- organisation chart ---------- */
/* The source draws its tree with ::before/::after connectors rather than any
   library; the rules are its own, with hover lighting the lineage so a branch
   can be followed across a wide chart. */
.tree { overflow-x: auto; padding-bottom: 10px; }
.tree * { margin: 0; padding: 0; }
.tree ul { padding-top: 20px; position: relative; white-space: nowrap; }
.tree li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
}
.tree li::before, .tree li::after {
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 2px solid #ddd;
    width: 50%; height: 20px;
}
.tree li::after { right: auto; left: 50%; border-left: 2px solid #ddd; }
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid #ddd; border-radius: 0 5px 0 0; }
.tree li:first-child::after { border-radius: 5px 0 0 0; }
.tree ul ul::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #ddd;
    width: 0; height: 20px;
}
.tree li a {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    background: #fff;
    color: #66615b;
    font-size: .72rem;
    white-space: normal;
    min-width: 120px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.tree li a hr { margin: 6px 0; border: 0; border-top: 1px solid #eee; }
.tree li a:hover, .tree li a:hover + ul li a { background: #f4f3ef; color: #252422; }
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before { border-color: #ef8157; }

/* ---------- employee profile card ---------- */
/* The source opens a profile with the face beside the seven facts that
   identify the employee, before any tab is chosen. */
.profile-photo {
    width: 100px;
    height: 108px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
}
.profile-summary { min-width: 320px; margin: 0; padding: 0; list-style: none; }
.profile-summary .list-group-item {
    padding: 5px 10px;
    border-bottom: 1px solid #f1f1f1;
    font-size: .78rem;
    color: #66615b;
}
.profile-summary .list-group-item:last-child { border-bottom: 0; }

/* ---------- admission flow ---------- */
/* EMPLOYEE ENTRY runs across five screens; the strip says where you are and
   the Skip beside it moves on without filling anything in. */
.admission-steps { font-size: .85rem; color: #66615b; }
.admission-steps .screen-tabs a { font-size: .72rem; }

/* ---------- employee picker ---------- */
/* The chosen person shows in a red badge beside the button, as upstream does;
   the dialog's roster scrolls rather than growing the page. */
.employee-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.employee-picker .label:empty { display: none; }
.picker-results { max-height: 340px; overflow-y: auto; margin-top: 10px; }
.picker-results table { margin-bottom: 0; }
.picker-results [data-picker-row] { cursor: pointer; }
.picker-results [data-picker-row]:hover { background: #f4f3ef; }

/* ---------- print / export ---------- */
/* The two controls sit in the breadcrumb bar beside Help, as upstream has
   them, and never appear on the paper they produce. */
.content-header .breadcrumb .print-export { margin-left: 10px; }
.content-header .breadcrumb .print-export .btn { padding: 3px 12px; font-size: .72rem; }
@media print {
    .sidebar, .navbar, .footer, .print-export, .screen-tabs { display: none !important; }
}

/* ---------- custom report field picker ---------- */
/* Two lists you drag between: what ends up on the right, in that order, is the
   report's column order. */
.field-picker .field-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 6px;
    min-height: 220px;
    max-height: 420px;
    overflow-y: auto;
    border: 1px dashed #ddd;
    border-radius: 8px;
    background: #fafafa;
}
.field-picker .field-list li {
    padding: 5px 10px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: .78rem;
    cursor: grab;
}
.field-picker .field-list li:hover { border-color: #ef8157; }
.field-picker .field-list li.dragging { opacity: .4; }
.field-picker .field-list-chosen { background: #fdf6e3; }

/* AdminLTE callout -> a hub tile.
   The source's hub pages (payroll_policy.php and its siblings) are a grid of
   `.callout` blocks. Paper Dashboard has no such class, so they rendered as
   bare stacked links; this gives them the card, the icon well and the hover
   the source's tiles have. */
.hub-tiles { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.hub-tiles .callout {
    display: block;
    padding: 10px;
}
.hub-tiles .callout > a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 18px;
    background: #fff;
    border: 1px solid #f0efeb;
    border-left: 4px solid #51cbce;
    border-radius: 12px;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .18);
    color: #252422;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.hub-tiles .callout > a:hover {
    box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .28);
    transform: translateY(-2px);
    border-left-color: #ef8157;
    color: #252422;
}
.hub-tiles .callout-info > a { border-left-color: #51cbce; }
.hub-tiles .callout .hub-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    background: #f4f3ef;
    color: #ef8157;
    font-size: 20px;
}
.hub-tiles .callout .hub-label {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
.hub-tiles .callout .hub-text { flex: 1 1 auto; min-width: 0; }
.hub-tiles .callout .hub-note {
    display: block;
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 400;
    color: #9a9a9a;
    line-height: 1.35;
}
/* The figure the source's first tile carries, pinned to the right of the tile. */
.hub-tiles .callout .hub-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 10px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #51cbce;
    line-height: 1;
}