/* ============================================================
   PACON WEB — UX/UI polish layer
   Loads after the "Sash" vendor stylesheets and refines them:
   accessible focus states, consistent buttons/badges/tables,
   loading & empty states, and the login/sidebar chrome.
   Visual refinement only — no view logic lives here.
   ============================================================ */

:root{
    --pw-radius-sm: 6px;
    --pw-radius-md: 10px;
    --pw-space-2: .5rem;
    --pw-space-4: 1rem;
    --pw-space-5: 1.5rem;
    --pw-space-6: 2.5rem;
    --pw-transition: 150ms ease;
    --pw-focus-ring: 0 0 0 3px rgba(108, 95, 252, .35);
    --pw-border: #e9ebf5;
    --pw-muted: #767c92;
}

/* ---------- Accessible focus (the vendor CSS ships none) ---------- */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
    border-color: var(--primary-bg-color);
    box-shadow: var(--pw-focus-ring);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.side-menu__item:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline: none;
    box-shadow: var(--pw-focus-ring);
    border-radius: var(--pw-radius-sm);
}

/* ---------- Buttons ---------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-weight: 500;
    transition: transform var(--pw-transition), box-shadow var(--pw-transition),
                filter var(--pw-transition), opacity var(--pw-transition);
}
.btn:hover{ filter: brightness(.96); }
.btn:active{ transform: translateY(1px); }
.btn:disabled,
.btn.disabled{ transform: none; filter: none; opacity: .55; }
.btn i.fe,
.btn i.fa,
.btn .fe,
.btn .fa{ font-size: 1rem; line-height: 1; }

/* row actions: reliable spacing without depending on utility classes in every echo() */
td .btn + .btn,
td .btn + a.btn,
td a.btn + a.btn{ margin-left: .35rem; }

/* ---------- Page header & cards ---------- */
.page-header{
    padding-bottom: var(--pw-space-4);
    border-bottom: 1px solid var(--pw-border);
}
.page-title{ font-weight: 600; letter-spacing: -.01em; }
.card{ transition: box-shadow var(--pw-transition); }

/* ---------- Forms ---------- */
.form-label{
    display: block;
    margin-top: 0;
    margin-bottom: .35rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pw-muted);
}
.form-control,
.form-select{ border-radius: var(--pw-radius-sm); }
.form-control::placeholder{ color: #a7abbd; }

/* ---------- Badges ---------- */
.badge{
    font-weight: 600;
    letter-spacing: .02em;
    padding: .42em .7em;
    border-radius: 999px;
}

/* ---------- Tables ---------- */
.table-responsive{ border-radius: var(--pw-radius-md); }
table.dataTable tbody tr{ transition: background-color var(--pw-transition); }
table.dataTable tbody tr:hover{ background-color: #f7f7fc; }
table.dataTable thead th{
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pw-muted);
    white-space: nowrap;
}

/* DataTables chrome (search box, length select, pagination) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-sm);
    padding: .35rem .6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius: var(--pw-radius-sm) !important;
    margin-left: .2rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background: var(--primary-bg-color) !important;
    border-color: var(--primary-bg-color) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_processing{
    border-radius: var(--pw-radius-md);
    box-shadow: 0 4px 25px 0 rgba(168, 180, 208, .18);
}

/* ---------- Empty state (used inside a tbody when a list has 0 rows) ---------- */
.pw-empty-row td{
    padding: var(--pw-space-6) var(--pw-space-4) !important;
    border: none !important;
}
.pw-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--pw-muted);
}
.pw-empty i{ font-size: 1.75rem; color: #c7cadf; }
.pw-empty span{ font-size: .875rem; }

/* ---------- Loading state ---------- */
.pw-loading{ position: relative; min-height: 140px; }
.pw-loading > *{ opacity: .35; }
.pw-loading::after{
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    border: 3px solid var(--pw-border);
    border-top-color: var(--primary-bg-color);
    border-radius: 50%;
    animation: pw-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
    .pw-loading::after{ animation-duration: 1.4s; }
}
@keyframes pw-spin{ to{ transform: rotate(360deg); } }

/* ---------- SweetAlert2 (used for every confirm/toast in the app) ---------- */
.swal2-popup{
    border-radius: var(--pw-radius-md) !important;
    font-family: inherit !important;
}
.swal2-title{ font-size: 1.25rem !important; }
.swal2-styled.swal2-confirm{
    background-color: var(--primary-bg-color) !important;
    border-radius: var(--pw-radius-sm) !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-cancel{
    border-radius: var(--pw-radius-sm) !important;
    box-shadow: none !important;
}
.swal2-styled:focus{ box-shadow: var(--pw-focus-ring) !important; }

/* ---------- Sidebar: current page ---------- */
.side-menu__item.active{ font-weight: 600; }

/* ---------- Login ---------- */
.pw-login-shell{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pw-space-5);
}
.pw-login-card{
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--pw-radius-md);
    box-shadow: 0 20px 60px rgba(40, 47, 83, .14);
    padding: var(--pw-space-6) var(--pw-space-5);
}
.pw-login-logo{ height: 44px; width: auto; }
.pw-login-card .input-group-text{ border-color: #dcdfef; }
.pw-login-card .form-control{ border-color: #dcdfef; }
.pw-login-card #btntoggleclave{ border-color: #dcdfef; cursor: pointer; }

/* ---------- Quick-link list (home) ---------- */
.list-group-item.list-group-item-action{
    padding: var(--pw-space-4) var(--pw-space-4);
    border-color: var(--pw-border);
    transition: background-color var(--pw-transition);
}
.list-group-item.list-group-item-action:hover{ background-color: #f7f7fc; }
.pw-quicklink-icon{
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--pw-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-transparentcolor);
    color: var(--primary-bg-color);
    font-size: 1.1rem;
}

/* ---------- Small utility ---------- */
.pw-muted{ color: var(--pw-muted) !important; }