/* ==========================================================================
   Komponentlager
   --------------------------------------------------------------------------
   Omstylar Bootstrap 3- och SmartAdmin-komponenter. Laddas SIST i
   layouts/pages.blade.php, så samma specificitet vinner över temat.

   Regel: ingen markup ändras av den här filen. Allt utgår från de klasser
   vyerna redan har. Det som ändras är form - spacing, radier, skuggor,
   kontrast och fokus - inte färgidentitet och inte layoutstruktur.
   ========================================================================== */

/* --- Bas ----------------------------------------------------------------- */
body {
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font);
    color: var(--text);
    line-height: var(--leading-tight);
    font-weight: var(--weight-medium);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

/* Tillgänglighetsgolv: temat har ingen synlig tangentbordsfokus alls.
   :focus-visible ger ringen till tangentbord men inte till muspekare. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* --- Knappar ------------------------------------------------------------- */
.btn {
    border-radius: var(--radius);
    font-weight: var(--weight-medium);
    font-size: var(--text-base);
    padding: 7px 14px;
    border-width: 1px;
    background-image: none;        /* temats gradienter bort */
    text-shadow: none;
    transition: background-color var(--speed) ease, border-color var(--speed) ease;
}
.btn-sm, .btn-xs { border-radius: var(--radius-sm); }

.btn-default {
    background-color: var(--n-0);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--n-50);
    border-color: var(--n-400);
    color: var(--text);
}

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}

.btn-danger  { background-color: var(--status-red);   border-color: var(--status-red); }
.btn-success { background-color: var(--status-green); border-color: var(--status-green); }

.btn[disabled], .btn.disabled { opacity: .5; box-shadow: none; }

/* Knappgrupper i tabellrader: jämn höjd och tydlig gruppering. */
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }

/* --- Statusbadgar --------------------------------------------------------
   Scoped till .label. Sidomenyns räknare (.badge.inbox-badge) rörs inte.

   Solid mättad botten med vit text ger svag kontrast (orange ~2.6:1).
   Tonad botten med mörk text av samma kulör behåller färgidentiteten -
   orange betyder fortfarande "ej skickad" - och klarar WCAG AA.          */
.label {
    display: inline-block !important;
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: .01em;
    line-height: 1.5;
    text-shadow: none;
    white-space: nowrap;
}
/* !important krävs här. Temat sätter .bg-color-*{background-color:...!important}
   (hiinvoice-production.min.css), och utan !important vinner temats mörka,
   mättade botten medan vår mörka text ändå slår igenom - resultatet blir
   mörk text på mörk botten, alltså oläsbara badgar. */
.label.bg-color-red      { background-color: var(--status-red-bg)    !important; color: var(--status-red-ink)    !important; }
.label.bg-color-blue     { background-color: var(--status-blue-bg)   !important; color: var(--status-blue-ink)   !important; }
.label.bg-color-orange   { background-color: var(--status-orange-bg) !important; color: var(--status-orange-ink) !important; }
.label.bg-color-green    { background-color: var(--status-green-bg)  !important; color: var(--status-green-ink)  !important; }
.label.bg-color-darken   { background-color: var(--status-grey-bg)   !important; color: var(--status-grey-ink)   !important; }
.label.bg-color-blueDark { background-color: var(--status-slate-bg)  !important; color: var(--status-slate-ink)  !important; }
.label.bg-color-info     { background-color: var(--n-100)            !important; color: var(--n-700)             !important; }

/* --- Tabeller ------------------------------------------------------------ */
.table {
    background-color: var(--surface);
    border-collapse: separate;
    border-spacing: 0;
}
.table > thead > tr > th {
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    vertical-align: middle;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--n-100);
    padding: 12px;
    vertical-align: middle;
    font-size: var(--text-base);
}
.table > tbody > tr:hover > td { background-color: var(--n-25); }

/* Belopp högerställda och i kolumn. */
.table td.text-right,
.table th.text-right { font-variant-numeric: tabular-nums lining-nums; }

/* --- Formulär ------------------------------------------------------------ */
.form-control {
    border-radius: var(--radius);
    border-color: var(--border-strong);
    box-shadow: none;
    font-size: var(--text-base);
    color: var(--text);
    height: 36px;
    padding: 6px 10px;
    transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.form-control:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}
.form-control::placeholder { color: var(--n-400); }
textarea.form-control { height: auto; }

label, .label-control { font-weight: var(--weight-medium); color: var(--text); }

/* Obligatoriska fält ska synas innan man submittar, inte efter. */
label.required::after,
.is-required > label::after {
    content: "*";
    color: var(--status-red-ink);
    margin-left: 2px;
}

.has-error .form-control { border-color: var(--status-red); }
.has-error .help-block   { color: var(--status-red-ink); }

/* --- Alerts -------------------------------------------------------------- */
.alert {
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    box-shadow: none;
}
.alert-success { background-color: var(--status-green-bg);  border-color: var(--status-green); color: var(--status-green-ink); }
.alert-danger  { background-color: var(--status-red-bg);    border-color: var(--status-red);   color: var(--status-red-ink); }
.alert-warning { background-color: var(--status-orange-bg); border-color: var(--status-orange);color: var(--status-orange-ink); }
.alert-info    { background-color: var(--brand-soft);       border-color: var(--brand);        color: var(--brand-ink); }

/* --- Modaler ------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-5);
}
.modal-header .modal-title { font-size: var(--text-md); font-weight: var(--weight-medium); }
.modal-body   { padding: var(--space-5); }
.modal-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-3) var(--space-5);
    background-color: var(--surface-sunken);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.modal-backdrop.in { opacity: .45; }

/* --- Paginering ----------------------------------------------------------
   AppServiceProvider anropar Paginator::useBootstrapFour(), så markupen är
   .page-item/.page-link medan temats CSS är Bootstrap 3. Båda formerna
   stylas här så den blir konsekvent oavsett vilken som renderas.          */
.pagination { border-radius: var(--radius); }
.pagination > li > a,
.pagination > li > span,
.pagination .page-link {
    border-color: var(--border);
    color: var(--text);
    padding: 6px 12px;
    font-size: var(--text-base);
}
.pagination > li > a:hover,
.pagination .page-link:hover { background-color: var(--n-50); }
.pagination > .active > a,
.pagination > .active > span,
.pagination .page-item.active .page-link {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--n-400); }

/* --- Kort ---------------------------------------------------------------- */
/* Ny komponent. Ingen befintlig vy använder .app-card ännu. */
.app-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.app-card__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}
.app-card__value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums lining-nums;
    margin: 0;
}

/* ==========================================================================
   DataTables
   --------------------------------------------------------------------------
   Server-side-tabellerna (artiklar, kunder) renderar sina rader via AJAX, sa
   raderna kan inte fa Tailwind-klasser i Blade. Dessutom genererar DataTables
   sin egen verktygsrad - sokfalt, sidlangd, info och paginering. Allt det
   stylas har i stallet, en gang, for alla tabeller som anvander pluginet.
   ========================================================================== */

.dataTables_wrapper { margin-top: 0; }

/* Verktygsraden overst */
.dataTables_wrapper .dt-toolbar {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-3) var(--space-4);
    margin: 0;
}

.dataTables_wrapper .dataTables_filter { margin: 0; }
.dataTables_wrapper .dataTables_filter label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    margin: 0;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: var(--text-base);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
    margin-left: var(--space-2);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    outline: none;
}
.dataTables_wrapper .dataTables_length label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    margin: 0;
}

/* Sjalva tabellen */
.dataTables_wrapper table.dataTable {
    border: 1px solid var(--border);
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    background: var(--surface);
}
.dataTables_wrapper table.dataTable > thead > tr > th {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    vertical-align: middle;
}
.dataTables_wrapper table.dataTable > tbody > tr > td {
    border-top: 1px solid var(--n-100);
    padding: 12px;
    font-size: var(--text-base);
    vertical-align: middle;
    color: var(--text);
}
.dataTables_wrapper table.dataTable > tbody > tr:hover > td { background: var(--n-25); }

/* Atgardsknapparna byggs i controllern som .btn.btn-sm och arver darfor
   knappstilen ovan. Har ger vi dem bara jamn luft. */
.dataTables_wrapper table.dataTable .btn-sm + .btn-sm,
.dataTables_wrapper table.dataTable a + a { margin-left: 3px; }

/* Foten: antal och paginering */
.dataTables_wrapper .dt-toolbar-footer {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin: 0;
    box-shadow: none;
}
.dataTables_wrapper .dataTables_info {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: 6px 0;
}
.dataTables_wrapper .dataTables_paginate { margin: 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text) !important;
    padding: 5px 11px;
    margin-left: 3px;
    font-size: var(--text-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--n-50);
    border-color: var(--border-strong);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Applikationsskalet - neutralisering av temats bakgrundsbilder
   --------------------------------------------------------------------------

   Tva regler i hiinvoice-production.min.css maler skalet med en
   bakgrundsBILD via background-shorthand:

     body  { background: url(../img/mybg.png) #fff }
     aside { background:#333; background: url(data:image/svg+xml;base64,...) }

   Tailwinds bg-utilities satter bara background-color. Bilden ligger darfor
   kvar ovanpa fargen - sidomenyn blev mork med osynlig text, och ytan bakom
   innehallet fick temats textur.

   Fargerna kommer fortfarande fran Tailwind-klasserna i markupen
   (tw-bg-sidebar respektive tw-bg-shell). Har slas bara bilderna av.
   -------------------------------------------------------------------------- */

body.app-shell    { background-image: none; }
#app-sidebar      { background-image: none; }