/* ============================================================
   days.css — Shared design-system for og-pos Blade views
   All pages in resources/views/website/** use these classes.
   ============================================================ */

/* ── Page layout ── */
.days-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 1rem; padding-bottom: 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}
.days-eyebrow {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #94a3b8; display: block; margin-bottom: .25rem;
}
.days-title {
    font-size: 1.5rem; font-weight: 700; color: #1e293b;
    margin-bottom: 0; line-height: 1.2;
}
.og-form-label {
    font-size: .72rem; font-weight: 600; color: #64748b;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: .25rem; display: block;
}
.days-panel { border-radius: .75rem !important; overflow: hidden; }

/* ── Collapsible filter toggle ── */
.days-toggle-btn { background: none; border: none; cursor: pointer; padding: 0; }
.days-toggle-inner {
    display: flex; align-items: center;
    justify-content: space-between; width: 100%;
}
.days-chevron { transition: transform .25s ease; font-size: .75rem; }
.days-toggle-btn[aria-expanded="true"]  .days-chevron { transform: rotate(180deg); }
.days-toggle-btn[aria-expanded="false"] .days-chevron { transform: rotate(0deg); }

/* ── Section headings (used in settings-style pages) ── */
.days-section-title {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #475569;
}
.days-section-sub { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
.days-accent {
    width: 3px; border-radius: 2px; align-self: stretch; min-height: 1.5rem;
}
.days-icon-wrap {
    width: 2rem; height: 2rem; border-radius: .4rem;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}

/* ── Table structure ── */
.days-table {
    min-width: 800px;   /* pages may override with a wider value */
    border-collapse: separate;
    border-spacing: 0;
}
.days-th {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .6rem .75rem; font-weight: 600;
    background: #1e293b; color: #94a3b8; border: none;
}
.days-row td { vertical-align: middle; border-top: 1px solid #f1f5f9; }
.days-row:hover td { background: #f8fafc !important; }

/* ── Column tints ── */
.days-col-info     { background: #fffbeb; border-left: 3px solid #fde68a; padding: .6rem .75rem; }
.days-col-status   { background: #f8fafc; border-left: 3px solid #e2e8f0; padding: .6rem .5rem; }
.days-col-cash     { background: #f0f8ff; border-left: 3px solid #b3d9ff; padding: .6rem .5rem; }
.days-col-cleared  { background: #f0fdf4; border-left: 3px solid #bbf7d0; padding: .6rem .5rem; }
.days-col-disc     { background: #fff1f0; border-left: 3px solid #fecaca; padding: .6rem .5rem; }
.days-col-salary   { background: #faf5ff; border-left: 3px solid #e9d5ff; padding: .6rem .75rem; }
.days-col-financial{ background: #f8fafc; border-left: 3px solid #e2e8f0; padding: .6rem .5rem; }
.days-col-actions  { background: #fff;    padding: .6rem .5rem; }
.days-col-deleted  { background: #fff1f0; border-left: 3px solid #fecaca; padding: .6rem .5rem; }
.days-col-media    { background: #f0f0ff; border-left: 3px solid #c7d2fe; padding: .6rem .5rem; }

/* ── Pill badges ── */
.days-pill {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600;
    border-radius: 999px; padding: .25em .65em;
}
.days-pill--green  { background: #dcfce7; color: #15803d; }
.days-pill--red    { background: #fee2e2; color: #b91c1c; }
.days-pill--amber  { background: #fef3c7; color: #92400e; }
.days-pill--blue   { background: #dbeafe; color: #1d4ed8; }
.days-pill--indigo { background: #e0e7ff; color: #4338ca; }
.days-pill--gray   { background: #f1f5f9; color: #475569; }

/* ── Action buttons ── */
.btn-action {
    display: inline-flex; align-items: center;
    padding: .3rem .6rem; font-size: .8rem; font-weight: 500;
    border: 1px solid #dee2e6; background: #fff; color: #495057;
    border-radius: 6px; text-decoration: none;
    transition: all .18s ease; cursor: pointer; white-space: nowrap;
}
.btn-action:hover {
    background: #f1f5f9; border-color: #adb5bd; color: #212529;
    transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.btn-action--danger { border-color: #fca5a5; color: #b91c1c; }
.btn-action--danger:hover { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.dropdown-toggle-no-arrow {
    display: inline-flex; align-items: center;
    padding: .3rem .6rem; font-size: .8rem; font-weight: 500;
    border: 1px solid #dee2e6; background: #fff; color: #495057;
    border-radius: 6px; cursor: pointer; transition: all .18s ease;
}
.dropdown-toggle-no-arrow::after { display: none; }
.dropdown-toggle-no-arrow:hover {
    background: #f1f5f9; border-color: #adb5bd;
    transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* ── Stat blocks ── */
.days-stat {
    background: #fff; border-radius: .65rem;
    padding: .9rem 1rem; border: 1px solid #e2e8f0;
    border-left-width: 4px; border-left-style: solid;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.days-stat-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #64748b; margin-bottom: .3rem;
}
.days-stat-value  { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.days-stat-value--lg { font-size: 1.35rem; }
.days-stat-sub    { font-size: .67rem; color: #94a3b8; margin-top: .2rem; }
.days-stat--blue   { border-left-color: #1565c0; }
.days-stat--blue   .days-stat-value { color: #1d4ed8; }
.days-stat--green  { border-left-color: #15803d; }
.days-stat--green  .days-stat-value { color: #15803d; }
.days-stat--amber  { border-left-color: #d97706; }
.days-stat--amber  .days-stat-value { color: #b45309; }
.days-stat--indigo { border-left-color: #4338ca; }
.days-stat--indigo .days-stat-value { color: #4338ca; }
.days-stat--red    { border-left-color: #dc2626; }
.days-stat--red    .days-stat-value { color: #b91c1c; }
.days-stat--dark   { border-left-color: #1e293b; background: #f8fafc; }
.days-stat--dark   .days-stat-value { color: #1e293b; }

/* ── Responsive table wrapper ── */
.table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }