/*
 * Alpha & Omega theme - same stylesheet as admin/assets/css/theme.css,
 * only the --brand-* colours differ. Keep the two files in sync.
 */

:root {
    /* Alpha & Omega brand: blue from the logo gradient.
       600/700 keep white button text readable (>= 4.5:1). */
    --brand-50: #f3f8fc;
    --brand-100: #dae9f6;
    --brand-500: #1c8fe0;
    --brand-600: #0b6fc4;
    --brand-700: #0b4c92;
    --brand-900: #0a1e3e;
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-300: #cbd5e1;
    --ink-200: #e2e8f0;
    --ink-100: #f1f5f9;
    --ink-50: #f8fafc;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --success: #16a34a;
    --success-bg: #f0fdf4;
    --pink: #db2777;
    --pink-bg: #fdf2f8;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, .1);
}

* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html, body {
    background: var(--ink-50);
    color: var(--ink-900);
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}

h3.text-center, h3.text-left { font-size: 19px; margin-bottom: 18px; }

a { color: var(--brand-600); }
a:hover, a:focus { color: var(--brand-700); text-decoration: none; }

.gc-container {
  width: 100%;
}

.only-mobiles {
    display: none;
}

th, td {
    font-size: 14px;
}

/* ===== layout ===== */
#page-wrapper { background: var(--ink-50); }
.container-fluid { padding: 24px 28px; }

/* Pin the top bar + sidebar to the viewport (desktop only) so only the
   content column scrolls, and so the sidebar's dark background always
   reaches the bottom of the screen instead of stopping at its own
   (shorter) menu content. The sidebar starts at top:0 (not below the
   header) and simply sits *behind* the header via z-index — that way
   it doesn't matter exactly how tall the header renders, there's never
   a gap between them. --topbar-height is only used to push the content
   column down clear of the header; nudge it if content sits a few px
   too high/low behind the header. */
@media (min-width: 768px) {
    :root { --topbar-height: 51px; }

    html, body { height: 100%; }

    .navbar-default.navbar-static-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px;
        overflow-y: auto;
        z-index: 1020;
    }

    #page-wrapper {
        margin-left: 250px;
        padding-top: var(--topbar-height);
        min-height: 100vh;
    }
}

.page-header {
    border-bottom: 1px solid var(--ink-200);
    padding-bottom: 12px;
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 700;
}

/* ===== top navbar ===== */
.navbar-default.navbar-static-top {
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-sm);
}

.navbar-default .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-900);
    font-weight: 700;
    font-size: 18px;
}

.navbar-brand .brand-logo {
    height: 30px;
    width: auto;
}

.navbar-top-links li > a { color: var(--ink-500); }
.navbar-top-links li > a:hover, .navbar-top-links li > a:focus { color: var(--brand-600); background: transparent; }

.dropdown-menu {
    border-radius: var(--radius-sm);
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-md);
}

/* ===== sidebar ===== */
.sidebar { background: var(--brand-900); }

/* :visited is repeated everywhere below — browsers permit background-color
   on :visited links (one of the few properties they don't lock down), so
   an already-visited item like "Domov" can pick up a stray default grey
   background unless that state is covered explicitly. */
.sidebar .nav > li > a,
.sidebar .nav > li > a:visited {
    color: #cbd5e1 !important;
    background-color: transparent !important;
    font-weight: 500;
    padding: 11px 20px;
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus,
.sidebar .nav > li > a:visited:hover,
.sidebar .nav > li > a:visited:focus {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

.sidebar .nav > li.active > a,
.sidebar .nav > li.active > a:visited {
    background: var(--brand-600) !important;
    color: #fff !important;
}

.sidebar .nav .nav-second-level > li > a,
.sidebar .nav .nav-second-level > li > a:visited {
    background: transparent !important;
    color: #94a3b8 !important;
    padding: 9px 20px 9px 44px;
    font-size: 13px;
}

.sidebar .nav .nav-second-level > li > a:hover,
.sidebar .nav .nav-second-level > li > a:visited:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .05) !important;
}

.sidebar .nav .nav-third-level > li > a,
.sidebar .nav .nav-third-level > li > a:visited {
    padding-left: 60px;
    font-size: 12.5px;
    color: #7c8aa0 !important;
    background: transparent !important;
}

.sidebar .nav .nav-third-level > li > a:hover,
.sidebar .nav .nav-third-level > li > a:visited:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .05) !important;
}

.sidebar .nav .nav-second-level > li.active > a,
.sidebar .nav .nav-third-level > li.active > a,
.sidebar .nav .nav-second-level > li.active > a:visited,
.sidebar .nav .nav-third-level > li.active > a:visited {
    background: var(--brand-600) !important;
    color: #fff !important;
}

.sidebar .nav > li > a > .fa { width: 18px; margin-right: 4px; color: #7c8aa0; }
.sidebar .nav > li > a > .fa.arrow { color: #64748b; width: auto; margin-right: 0; }

/* ===== panels / cards ===== */
.panel {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.panel-default > .panel-heading {
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200);
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 600;
    color: var(--ink-900);
    padding: 12px 16px;
}

.panel-heading.heading { cursor: pointer; }
.panel-body { padding: 16px; }
.panel-footer { background: var(--ink-50); border-top: 1px solid var(--ink-200); }

.panel-footer-custom-expired {
    background: var(--danger-bg) !important;
    border-top: 1px solid var(--danger-border) !important;
    color: #7f1d1d;
}

.panel-footer-custom-warning {
    background: var(--warning-bg) !important;
    border-top: 1px solid var(--warning-border) !important;
    color: #78350f;
}

/* ===== tables ===== */
.table-responsive {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: #fff;
}

.table { background: #fff; margin-bottom: 0; }

.table > thead > tr > th {
    background: var(--ink-100);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--ink-200) !important;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-color: var(--ink-100);
    vertical-align: middle;
    color: var(--ink-700);
}

.table-hover > tbody > tr:hover { background: var(--brand-50) !important; }

.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
    border: 1px solid var(--ink-200);
}

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > td { padding: 8px 10px; }

/* plain non-bootstrap tables (border="1") used inside panels */
table[border="1"] { width: 100%; border-collapse: collapse; background: #fff; }
table[border="1"] th {
    background: var(--ink-100);
    color: var(--ink-700);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 8px;
    border: 1px solid var(--ink-200) !important;
}
table[border="1"] td { padding: 8px; border: 1px solid var(--ink-100) !important; font-size: 13px; }

/* status highlighting — overrides legacy inline background colours with soft
   tints + a coloured stripe, so the templates don't have to change.
   red:    #FF7171 (overdue), #F97B7B (stock to order), rgba(255, 28, 1, .3)
   orange: #FFB53B (due soon)
   green:  lightgreen (sales)
   pink:   #FF97D3 (unassigned work orders) */
tr[style*="FF7171" i],
tr[style*="F97B7B" i],
tr[style*="255, 28, 1" i] { background: var(--danger-bg) !important; box-shadow: inset 3px 0 0 var(--danger); }
tr[style*="FF7171" i] td,
tr[style*="F97B7B" i] td,
tr[style*="255, 28, 1" i] td { color: #7f1d1d; }

tr[style*="FFB53B" i] { background: var(--warning-bg) !important; box-shadow: inset 3px 0 0 var(--warning); }
tr[style*="FFB53B" i] td { color: #78350f; }

tr[style*="lightgreen" i] { background: var(--success-bg) !important; box-shadow: inset 3px 0 0 var(--success); }
tr[style*="lightgreen" i] td { color: #14532d; }

tr[style*="FF97D3" i] { background: var(--pink-bg) !important; box-shadow: inset 3px 0 0 var(--pink); }
tr[style*="FF97D3" i] td { color: #831843; }

/* risk / improvement score cells: <td style="background-color: red|yellow|green"> */
td[style*="background-color: red" i],
td[style*="background-color:red" i] {
    background: var(--danger-bg) !important;
    color: #991b1b;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--danger);
}
td[style*="background-color: yellow" i],
td[style*="background-color:yellow" i] {
    background: var(--warning-bg) !important;
    color: #92400e;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--warning);
}
td[style*="background-color: green" i],
td[style*="background-color:green" i] {
    background: var(--success-bg) !important;
    color: #166534;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--success);
}

/* ===== forms ===== */
.form-control {
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-size: 13.5px;
    height: 36px;
}

.form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}

select.form-control { height: 36px; }
textarea.form-control { height: auto; }

.form-horizontal .control-label { font-weight: 600; color: var(--ink-700); text-align: right; padding-top: 8px; }
.form-group { margin-bottom: 16px; }

input[type="submit"] {
    display: inline-block;
    padding: 7px 16px;
    background: var(--brand-600);
    color: #fff;
    border: 1px solid var(--brand-600);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
input[type="submit"]:hover { background: var(--brand-700); }

input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; }

/* ===== buttons ===== */
.btn { border-radius: var(--radius-sm); font-weight: 500; box-shadow: none; }
.btn-default { background: #fff; border-color: var(--ink-300); color: var(--ink-700); }
.btn-default:hover { background: var(--ink-100); }
.btn-primary { background: var(--brand-600); border-color: var(--brand-600); }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn-info { background: var(--brand-500); border-color: var(--brand-500); }
.btn-info:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-secondary { background: #fff; border-color: var(--ink-300); color: var(--ink-700); }
.btn-xs { padding: 3px 8px; font-size: 11.5px; border-radius: 5px; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; border-radius: 5px; }

/* ===== modal ===== */
.modal-content { border-radius: var(--radius); border: none; box-shadow: 0 20px 40px rgba(15, 23, 42, .2); }
.modal-header { border-bottom: 1px solid var(--ink-200); }
.modal-footer { border-top: 1px solid var(--ink-200); }

/* ===== 5labs extras ===== */

/* logo cyan accent stripe on the active menu item */
.sidebar .nav > li.active > a,
.sidebar .nav .nav-second-level > li.active > a,
.sidebar .nav .nav-third-level > li.active > a {
    box-shadow: inset 3px 0 0 var(--brand-500);
}

.navbar-brand .brand-logo { height: 32px; }

/* quiet scrollbar for the long admin menu */
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 4px; }

/* ===== Grocery CRUD (bootstrap theme) ===== */
.gc-container .table-section,
.gc-container .form-container {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.gc-container .table-label {
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200);
    padding: 12px 16px;
    font-weight: 600;
    color: var(--ink-900);
}

.gc-container .minimize-maximize-container {
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink-500);
}

.gc-container .header-tools,
.gc-container .footer-tools {
    padding: 10px 16px;
    background: #fff;
}

.gc-container .footer-tools { border-top: 1px solid var(--ink-200); }

.gc-container .table-container { border: none; }

.gc-container .form-container { padding: 20px; }

.gc-container .searchable-input { border-radius: var(--radius-sm); }
.gc-container .searchable-input.value-not-empty { border-color: var(--brand-500); background: var(--brand-50); }

.gc-container .pagination > .active > a,
.gc-container .pagination > .active > a:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
}
.gc-container .pagination > li > a { color: var(--brand-600); }

/* ===== dashboard ===== */
.dashboard-banner {
    display: block;
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* ===== work order: "Seznam meril za kalibracijo" (work_orders/manage.tpl) ===== */
.wo-devices { overflow: visible; }

.wo-devices__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wo-devices__title { font-size: 15px; font-weight: 600; }

.wo-devices__count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 11px;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 12px;
    text-align: center;
}

.wo-devices__tools { display: flex; flex-wrap: wrap; gap: 6px; }

.wo-devices__bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--brand-50);
    border-bottom: 1px solid var(--ink-200);
}
.wo-devices__bulk label { margin: 0; font-weight: 600; color: var(--ink-700); font-size: 13px; }
.wo-devices__bulk .form-control { width: auto; }

/* horizontal scroll on small screens only, so the row menus aren't clipped on desktop */
.wo-devices__table { overflow-x: auto; }
@media (min-width: 1200px) { .wo-devices__table { overflow: visible; } }

.wo-devices .table { margin: 0; box-shadow: none; }
.wo-devices .table > thead > tr > th { border-top: none; }
.wo-devices .table > tbody > tr > td { padding: 10px 12px; vertical-align: top; }

.wo-no { font-variant-numeric: tabular-nums; color: var(--ink-500); white-space: nowrap; }

.wo-device { min-width: 200px; }
.wo-device__name { font-weight: 600; color: var(--ink-900); }
.wo-device__meta { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.wo-device__id {
    display: inline-block;
    padding: 0 6px;
    margin-right: 4px;
    border-radius: 4px;
    background: var(--ink-100);
    color: var(--ink-700);
    font-family: Consolas, Menlo, monospace;
    font-size: 11.5px;
}

.wo-devices .calibration_date .form-control { width: 150px; }
.wo-devices select.form-control { min-width: 140px; }

.wo-odpis { min-width: 150px; }
.wo-odpis textarea { margin-top: 6px; resize: vertical; height: auto; font-size: 12.5px; }

.wo-docs { min-width: 170px; }
.wo-docs .btn { margin: 0 4px 4px 0; }
.wo-upload { display: inline-block; margin: 0; }
.wo-upload label { margin: 0 0 4px; cursor: pointer; }
.wo-upload input[type="file"] { display: none; }

.wo-actions { white-space: nowrap; text-align: right; }
.wo-actions .dropdown-menu > li > a { padding: 6px 16px; }
.wo-actions .dropdown-menu .wo-delete { color: var(--danger); }
.wo-actions .dropdown-menu .wo-delete:hover { background: var(--danger-bg); color: var(--danger); }

.wo-empty { text-align: center; color: var(--ink-500); padding: 28px !important; }

/* ===== coloured summary cards (calibration lists) =====
   Templates define these with strong colours in an inline <style>; soften them
   but keep the meaning: unit/info = brand, company = dark brand,
   warning = amber, expired = red. */
.panel-default > .panel-heading-custom-enota,
.panel-default > .panel-heading-custom-info {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
    border-bottom: 1px solid var(--brand-100) !important;
    box-shadow: inset 0 3px 0 var(--brand-500);
    font-weight: 600;
}
.panel-default > .panel-footer-custom-enota,
.panel-default > .panel-footer-custom-info {
    background: var(--brand-50) !important;
    border-top: 1px solid var(--brand-100) !important;
    color: var(--brand-700) !important;
}

.panel-default > .panel-heading-custom-podjetje {
    background: var(--brand-100) !important;
    color: var(--brand-900) !important;
    border-bottom: 1px solid var(--brand-100) !important;
    box-shadow: inset 0 3px 0 var(--brand-700);
    font-weight: 600;
}
.panel-default > .panel-footer-custom-podjetje {
    background: var(--brand-100) !important;
    border-top: 1px solid var(--brand-100) !important;
    color: var(--brand-900) !important;
}

.panel-default > .panel-heading-custom-warning {
    background: var(--warning-bg) !important;
    color: #78350f !important;
    border-bottom: 1px solid var(--warning-border) !important;
    box-shadow: inset 0 3px 0 var(--warning);
    font-weight: 600;
}

.panel-default > .panel-heading-custom-expired {
    background: var(--danger-bg) !important;
    color: #7f1d1d !important;
    border-bottom: 1px solid var(--danger-border) !important;
    box-shadow: inset 0 3px 0 var(--danger);
    font-weight: 600;
}

/* ===== welcome card (alpha dashboard) ===== */
.welcome-card {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 880px;
    padding: 32px 36px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.welcome-card__logo { width: 180px; height: auto; flex-shrink: 0; }
.welcome-card__hello { color: var(--ink-500); font-size: 15px; }
.welcome-card__name { margin: 2px 0 8px; font-size: 26px; font-weight: 700; color: var(--brand-900); }
.welcome-card p { margin: 0; color: var(--ink-700); font-size: 15px; }
@media (max-width: 600px) {
    .welcome-card { flex-direction: column; text-align: center; padding: 24px; gap: 16px; }
    .welcome-card__logo { width: 140px; }
}