/*
 * Roboteka — Application styles
 *
 * Depends on design-tokens.css (CSS custom properties).
 * Provides: base reset & typography, app shell (header / sidebar / footer /
 * mobile overlay), and the in-house lightweight component kit
 * (buttons, cards, badges, alerts, forms, tables, pagination, grid,
 * spacing/flex/utility classes).
 */

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Onest', system-ui, -apple-system, sans-serif;
    font-size: 14px; line-height: 1.5;
    color: var(--g1); background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--p); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; }
::selection { background: var(--brand-amber); color: var(--brand-indigo); }

/* ── App Header ───────────────────────────────────────── */
.app-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--hh);
    background: var(--s); border-bottom: 1px solid var(--bd);
    display: flex; align-items: center; padding: 0 1rem; gap: .625rem;
    box-shadow: var(--shadow-1);
}
.app-brand {
    display: flex; align-items: center; gap: .5rem;
    font-size: .9375rem; font-weight: 700; color: var(--g1);
    text-decoration: none; flex-shrink: 0;
}
.app-brand:hover { text-decoration: none; }
.app-brand-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.app-header-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* ── Hamburger ────────────────────────────────────────── */
.sidebar-toggle {
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; flex-shrink: 0;
    background: transparent; border: 0; cursor: pointer;
    border-radius: var(--rsm);
}
.sidebar-toggle:hover { background: var(--g7); }
@media (max-width: 767px) { .sidebar-toggle { display: flex; } }

/* ── Layout wrapper ───────────────────────────────────── */
.app-layout {
    display: flex;
    margin-top: var(--hh);
    min-height: calc(100vh - var(--hh));
}

/* ── Sidebar ──────────────────────────────────────────── */
.app-sidebar {
    width: var(--sw); flex-shrink: 0;
    position: fixed; top: var(--hh); left: 0; bottom: 0;
    background: var(--s); border-right: 1px solid var(--bd);
    overflow-y: auto; z-index: 100;
    transition: transform .2s ease;
}
@media (max-width: 767px) {
    .app-sidebar         { transform: translateX(-100%); box-shadow: none; }
    .app-sidebar.sb-open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.12); }
}

.sb-nav  { padding: .5rem 0 1rem; }
.sb-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .4375rem .875rem; margin: 1px .5rem;
    border-radius: var(--r);
    font-size: .8125rem; font-weight: 500; line-height: 1.4;
    color: var(--g2); text-decoration: none; white-space: nowrap;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sb-item:hover         { background: var(--g7); color: var(--g1); text-decoration: none; }
.sb-item.is-active     { background: var(--p-bg); color: var(--p); font-weight: 600; }
.sb-item svg           { flex-shrink: 0; opacity: .7; }
.sb-item.is-active svg { opacity: 1; }
.sb-divider { height: 1px; background: var(--bd); margin: .375rem .875rem; }
.sb-label   {
    padding: .875rem .875rem .25rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--g3);
}

/* ── Main area ────────────────────────────────────────── */
.app-main {
    flex: 1; min-width: 0;
    margin-left: var(--sw);
    padding: 1.5rem;
}
@media (max-width: 767px) { .app-main { margin-left: 0; padding: 1rem; } }

/* ── Footer ───────────────────────────────────────────── */
.app-footer {
    margin-left: var(--sw);
    padding: .875rem 1.5rem;
    border-top: 1px solid var(--bd);
    text-align: center;
}
.app-footer a {
    color: var(--g3); font-size: .75rem;
    text-decoration: none; margin: 0 .625rem;
}
.app-footer a:hover { color: var(--g2); text-decoration: underline; }
@media (max-width: 767px) { .app-footer { margin-left: 0; } }

/* ── Sidebar overlay (mobile) ─────────────────────────── */
.sb-overlay {
    display: none; position: fixed; inset: 0; z-index: 99;
    background: rgba(0, 0, 0, .28);
}
@media (max-width: 767px) { .sb-overlay.sb-open { display: block; } }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 1rem; gap: .375rem;
    font-size: .8125rem; font-weight: 500; line-height: 1;
    border-radius: var(--r); border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1), box-shadow var(--dur-1);
    outline: none; user-select: none;
}
.btn:active        { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sm { height: 28px !important; padding: 0 .75rem !important; font-size: .75rem !important; border-radius: var(--rsm) !important; }
.btn-lg { height: 40px !important; padding: 0 1.25rem !important; font-size: .875rem !important; }

.btn-primary         { background: var(--p);   color: #fff; border-color: var(--p); }
.btn-primary:hover   { background: var(--p-d); border-color: var(--p-d); }
.btn-success         { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover   { background: #22754e; border-color: #22754e; }
.btn-danger          { background: var(--danger);  color: #fff; border-color: var(--danger); }
.btn-danger:hover    { background: #bf3827; border-color: #bf3827; }
.btn-warning         { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover   { background: #ad6913; border-color: #ad6913; }
.btn-info            { background: var(--info);    color: #fff; border-color: var(--info); }
.btn-info:hover      { background: #3340b0; border-color: #3340b0; }
.btn-secondary       { background: var(--g7); color: var(--g2); border-color: var(--g6); }
.btn-secondary:hover { background: rgba(26, 30, 92, 0.08); }
.btn-light           { background: var(--s); color: var(--g2); border-color: var(--g6); }
.btn-light:hover     { background: var(--g7); }
.btn-outline-primary         { background: var(--s); color: var(--p); border-color: var(--p); }
.btn-outline-primary:hover   { background: var(--p-bg); }
.btn-outline-secondary       { background: var(--s); color: var(--g2); border-color: var(--g5); }
.btn-outline-secondary:hover { background: var(--g7); }
.btn-outline-danger          { background: var(--s); color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover    { background: var(--danger-bg); }
.btn-link            { background: transparent; border-color: transparent; color: var(--p); height: auto; padding: 0; }
.btn-link:hover      { text-decoration: underline; }

/* ── Cards ────────────────────────────────────────────── */
.card        { background: var(--s); border: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-2); }
.card-body   { padding: 1rem; }
.card-header { padding: .75rem 1rem; border-bottom: 1px solid var(--bd); }
.card-footer { padding: .75rem 1rem; border-top: 1px solid var(--bd); }
.card-title  { font-size: .9375rem; font-weight: 600; color: var(--g1); margin: 0; }
.card-text   { font-size: .8125rem; color: var(--g2); }
.card:hover  { box-shadow: var(--shadow-3); }
.card-installed { box-shadow: var(--shadow-2) !important; }
.border-success { box-shadow: var(--shadow-2), 0 0 0 2px var(--success) !important; }
.border-info    { box-shadow: var(--shadow-2), 0 0 0 2px var(--info) !important; }
.border-warning { box-shadow: var(--shadow-2), 0 0 0 2px var(--warning) !important; }
.border-danger  { box-shadow: var(--shadow-2), 0 0 0 2px var(--danger) !important; }

/* ── Badges ───────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: .125rem .5rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 9999px; line-height: 1.4; white-space: nowrap;
}
.badge-primary   { background: var(--p-bg);       color: var(--p); }
.badge-secondary { background: var(--g7);         color: var(--g2); }
.badge-success   { background: var(--success-bg); color: var(--success); }
.badge-danger    { background: var(--danger-bg);  color: var(--danger); }
.badge-warning   { background: var(--warning-bg); color: var(--warning); }
.badge-info      { background: var(--info-bg);    color: var(--info); }

/* ── Alerts ───────────────────────────────────────────── */
.alert {
    padding: .75rem 1rem; border-radius: var(--r);
    border: 1px solid transparent; font-size: .8125rem; margin-bottom: 1rem;
}
.alert-success { background: var(--success-bg); border-color: rgba(42, 138, 92, .25);  color: var(--success); }
.alert-danger  { background: var(--danger-bg);  border-color: rgba(217, 68, 46, .25);  color: var(--danger); }
.alert-warning { background: var(--warning-bg); border-color: rgba(201, 123, 23, .25); color: var(--warning); }
.alert-info    { background: var(--info-bg);    border-color: rgba(60, 73, 200, .25);  color: var(--info); }
.alert-dismissible { padding-right: 2.5rem; position: relative; }
.close {
    position: absolute; top: .75rem; right: .75rem;
    font-size: 1.125rem; line-height: 1; opacity: .5;
    background: transparent; border: 0; cursor: pointer; color: inherit;
}
.close:hover { opacity: 1; }

/* ── Forms ────────────────────────────────────────────── */
.form-control {
    display: block; width: 100%; height: 34px;
    padding: 0 .75rem; font-size: .8125rem; font-family: inherit;
    color: var(--g1); background: #fff;
    border: 1px solid var(--g5); border-radius: var(--rsm);
    outline: none; appearance: none;
    transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.form-control:focus { border-color: var(--p); box-shadow: var(--shadow-focus); }
textarea.form-control { height: auto; padding: .5rem .75rem; resize: vertical; }
select.form-control {
    padding-right: 2rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23828b95' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .625rem center;
}
.form-group { margin-bottom: 1rem; }
.form-row   { display: flex; flex-wrap: wrap; margin-left: -.5rem; margin-right: -.5rem; }
.control-label, label { display: block; font-size: .8125rem; font-weight: 500; color: var(--g2); margin-bottom: .25rem; }
.help-block { font-size: .75rem; color: var(--g3); margin-top: .25rem; }
.has-error .form-control       { border-color: #f87171; }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, .2); }
.has-error .control-label      { color: #dc2626; }
.has-error .help-block         { color: #dc2626; }
.invalid-feedback { font-size: .75rem; color: #dc2626; margin-top: .25rem; }
.custom-control        { display: flex; align-items: center; }
.custom-control-inline { display: inline-flex; margin-right: 1rem; }
.custom-control-input  { margin-right: .375rem; cursor: pointer; }
.custom-control-label  { font-size: .8125rem; color: var(--g2); cursor: pointer; }

/* ── Table ────────────────────────────────────────────── */
.table { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.table th {
    padding: .5rem .75rem; text-align: left; white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--g3); background: var(--bg); border-bottom: 1px solid var(--bd);
}
.table td { padding: .5rem .75rem; border-bottom: 1px solid var(--g7); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-sm th { padding: .3125rem .625rem; font-size: .625rem; }
.table-sm td { padding: .3125rem .625rem; }
.table-striped tbody tr:nth-child(even) td { background: rgba(26, 30, 92, 0.025); }
.table-bordered { border: 1px solid var(--bd); }
.table-bordered td, .table-bordered th { border: 1px solid var(--bd); }
.table-hover tbody tr { transition: background var(--dur-1) var(--ease); }
.table-hover tbody tr:hover td { background: var(--g7); }
/* Sort links */
.table th a       { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.table th a:hover { color: var(--g1); text-decoration: none; }
.table th a.asc::after  { content: '↑'; font-size: .625rem; opacity: .8; font-family: system-ui; }
.table th a.desc::after { content: '↓'; font-size: .625rem; opacity: .8; font-family: system-ui; }
/* Card wrapper */
.table-card {
    background: var(--s); border: 1px solid var(--bd);
    border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-2);
}
.table-card > .table, .table-card .table { margin: 0; }
.table-card .table-bordered,
.table-card .table-bordered td,
.table-card .table-bordered th { border-left: 0; border-right: 0; }
.table-card .table th:first-child,
.table-card .table td:first-child { padding-left: 1rem; }
.table-card .table th:last-child,
.table-card .table td:last-child  { padding-right: 1rem; }

/* ── Pagination ───────────────────────────────────────── */
.pagination { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 1rem 0; }
.page-item .page-link,
.page-item.disabled span {
    display: flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 .5rem;
    font-size: .8125rem; border: 1px solid var(--g6);
    border-radius: var(--rsm); color: var(--g2);
    text-decoration: none; transition: background var(--dur-1);
}
.page-item .page-link:hover    { background: var(--g7); text-decoration: none; }
.page-item.active .page-link   { background: var(--p); border-color: var(--p); color: #fff; }
.page-item.disabled .page-link,
.page-item.disabled span       { opacity: .35; pointer-events: none; }

/* ── Grid ─────────────────────────────────────────────── */
.container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: .75rem; padding-right: .75rem; }
.row { display: flex; flex-wrap: wrap; margin-left: -.5rem; margin-right: -.5rem; }
.col-12, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-lg-3, .col-lg-4, .col-lg-6, .col-lg-8, .col-lg-10,
.col-xl-3, .col-xl-4 {
    width: 100%; padding-left: .5rem; padding-right: .5rem;
}
@media (min-width: 768px) {
    .col-md-3 { width: 25%; }      .col-md-4 { width: 33.333%; }
    .col-md-5 { width: 41.667%; }  .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333%; }  .col-md-8 { width: 66.667%; }
    .col-md-9 { width: 75%; }
    .form-group.col-md-6  { width: 50%; }
    .flex-md-row          { flex-direction: row !important; }
    .align-items-md-start { align-items: flex-start !important; }
    .mb-md-0              { margin-bottom: 0 !important; }
    .pr-md-3              { padding-right: .75rem !important; }
}
@media (min-width: 1024px) {
    .col-lg-3  { width: 25%; }   .col-lg-4  { width: 33.333%; }
    .col-lg-6  { width: 50%; }   .col-lg-8  { width: 66.667%; }
    .col-lg-10 { width: 83.333%; }
}
@media (min-width: 1440px) {
    .col-xl-3 { width: 25%; }    .col-xl-4 { width: 33.333%; }
}

/* ── Spacing ──────────────────────────────────────────── */
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:.75rem!important}.mt-4{margin-top:1rem!important}.mt-5{margin-top:1.5rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:.75rem!important}.mb-4{margin-bottom:1rem!important}.mb-5{margin-bottom:1.5rem!important}
.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:.75rem!important}
.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:.75rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:.75rem!important}.p-4{padding:1rem!important}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}
.py-4{padding-top:1rem!important;padding-bottom:1rem!important}
.px-2{padding-left:.5rem!important;padding-right:.5rem!important}
.px-3{padding-left:.75rem!important;padding-right:.75rem!important}
.px-4{padding-left:1rem!important;padding-right:1rem!important}

/* ── Typography ───────────────────────────────────────── */
h1,.h1{font-size:1.375rem;font-weight:700;color:var(--g1);margin:0 0 1.25rem;line-height:1.25;letter-spacing:-0.3px}
h2,.h2{font-size:1.125rem;font-weight:600;color:var(--g1);margin:0 0 1rem;line-height:1.3}
h3,.h3{font-size:1rem;font-weight:600;color:var(--g1);margin:0 0 .75rem}
h4,.h4{font-size:.9375rem;font-weight:600;color:var(--g1);margin:0 0 .5rem}
h5,.h5{font-size:.875rem;font-weight:600;color:var(--g1);margin:0 0 .375rem}
h6,.h6{font-size:.8125rem;font-weight:600;color:var(--g1);margin:0 0 .25rem}
p { margin: 0 0 .5rem; }
small,.small { font-size: .75rem; }
code { font-size: .8125rem; font-family: 'JetBrains Mono', ui-monospace, monospace; background: var(--g7); padding: .1em .35em; border-radius: var(--rsm); }
.text-muted     { color: var(--g3) !important; }
.text-primary   { color: var(--p)  !important; }
.text-success   { color: var(--success) !important; }
.text-danger    { color: var(--danger)  !important; }
.text-warning   { color: var(--warning) !important; }
.text-info      { color: var(--info)    !important; }
.text-secondary { color: var(--g3) !important; }
.text-dark      { color: var(--g1) !important; }
.text-center    { text-align: center !important; }
.text-left      { text-align: left   !important; }
.text-right     { text-align: right  !important; }
.font-weight-bold     { font-weight: 700 !important; }
.font-weight-semibold { font-weight: 600 !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-nowrap    { white-space: nowrap !important; }

/* ── Flex / display ───────────────────────────────────── */
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block       { display: block !important; }
.d-inline      { display: inline !important; }
.d-none        { display: none !important; }
.align-items-center   { align-items: center !important; }
.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-baseline { align-items: baseline !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.flex-column   { flex-direction: column !important; }
.flex-row      { flex-direction: row !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.gap-1         { gap: .25rem !important; }
.gap-2         { gap: .5rem  !important; }
.gap-3         { gap: .75rem !important; }
.mr-auto       { margin-right: auto !important; }
.ml-auto       { margin-left:  auto !important; }

/* ── Misc utilities ───────────────────────────────────── */
.h-100          { height: 100% !important; }
.w-100          { width:  100% !important; }
.bg-transparent { background: transparent !important; }
.bg-white       { background: #fff !important; }
.rounded        { border-radius: var(--r)   !important; }
.rounded-sm     { border-radius: var(--rsm) !important; }
.rounded-full   { border-radius: 9999px     !important; }
.overflow-hidden   { overflow: hidden !important; }
.overflow-auto     { overflow: auto   !important; }
.position-relative { position: relative !important; }
.border         { border: 1px solid var(--bd) !important; }
.border-0       { border: 0 !important; }
.border-top     { border-top:    1px solid var(--bd) !important; }
.border-bottom  { border-bottom: 1px solid var(--bd) !important; }
.shadow-sm      { box-shadow: var(--shadow-1) !important; }
.cursor-pointer { cursor: pointer; }