/* Clickame Theme — capa de sobreescriptura sobre ACE/Bootstrap 3. Colors a :root. */
:root {
    /* Paleta clickame.es: grafit càlid, fons crema, accents verd/blau/taronja suaus */
    --ck-primary: #2e2d2c;        /* botons principals, com al web */
    --ck-primary-dark: #000000;
    --ck-link: #3d6fb6;           /* blau Clickame (#6095E2) enfosquit per contrast */
    --ck-link-dark: #2c5490;
    --ck-accent: #f28d3b;         /* taronja Clickame */
    --ck-accent-soft: #fdf1e6;
    --ck-green: #71cc71;
    --ck-bg: #fbfaf7;
    --ck-surface: #ffffff;
    --ck-border: #e7e5df;
    --ck-text: #2e2d2c;
    --ck-muted: #6b6963;
    --ck-nav: #2e2d2c;
    --ck-sidebar: #ffffff;
    --ck-hover: #f4f2ed;
    --ck-radius: 12px;
    --ck-shadow: 0 1px 2px rgba(46, 45, 44, .05), 0 1px 3px rgba(46, 45, 44, .06);
}

/* Base */
body, .main-content, .page-content {
    background: var(--ck-bg) !important;
    color: var(--ck-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .widget-title { font-family: inherit; font-weight: 600; color: var(--ck-text); }
a { color: var(--ck-link); }
a:hover, a:focus { color: var(--ck-link-dark); }

/* Barra superior */
.navbar, .navbar-default, #navbar {
    background: var(--ck-nav) !important;
    border: 0 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}
.navbar .navbar-brand { font-weight: 600; letter-spacing: -.01em; }
.ace-nav > li { border-left: 0 !important; }
.ace-nav > li > a { background: transparent !important; }
.ace-nav > li > a:hover, .ace-nav > li.open > a { background: rgba(255, 255, 255, .08) !important; }
.dropdown-menu {
    border: 1px solid var(--ck-border) !important;
    border-radius: var(--ck-radius) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .12) !important;
    padding: 6px !important;
}
.dropdown-menu > li > a { border-radius: 6px; padding: 7px 12px; }
.dropdown-menu > li > a:hover { background: var(--ck-hover) !important; color: var(--ck-text) !important; }

/* Barra lateral */
.sidebar, .sidebar:before { background: var(--ck-sidebar) !important; border-color: var(--ck-border) !important; }
.sidebar .nav-list > li { border: 0 !important; }
.sidebar .nav-list > li > a {
    background: transparent !important;
    color: var(--ck-muted) !important;
    margin: 2px 8px;
    border-radius: 8px;
}
.sidebar .nav-list > li > a:hover { background: var(--ck-hover) !important; color: var(--ck-text) !important; }
.sidebar .nav-list > li:before, .sidebar .nav-list > li > a:after, .sidebar .nav-list > li.active:after { display: none !important; }
.sidebar .nav-list > li.active > a {
    background: var(--ck-accent-soft) !important;
    color: var(--ck-text) !important;
    font-weight: 600;
}
.sidebar .nav-list > li .menu-icon { color: inherit !important; }
.sidebar-toggle { background: var(--ck-sidebar) !important; border-color: var(--ck-border) !important; }

/* Sidebar desplegada: llista vertical icona + text (substitueix el format "compact" d'ACE) */
@media (min-width: 992px) {
    .sidebar.compact:not(.menu-min) { width: 180px !important; border-right: 1px solid var(--ck-border) !important; padding-top: 12px; }
    .sidebar.compact:not(.menu-min) + .main-content { margin-left: 180px !important; }
    .sidebar.compact:not(.menu-min) ~ .footer .footer-inner { left: 180px !important; }
    .sidebar.compact:not(.menu-min) .nav-list > li > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        height: 34px !important;
        line-height: 34px !important;
        padding: 0 10px !important;
        margin: 1px 8px;
        text-align: left !important;
        font-size: 13px;
        font-weight: 500;
    }
    .sidebar.compact:not(.menu-min) .nav-list > li > a > .menu-icon {
        display: inline-block !important;
        width: 20px;
        height: auto !important;
        line-height: inherit !important;
        font-size: 15px !important;
        text-align: center;
        margin: 0 !important;
        opacity: .85;
    }
    .sidebar.compact:not(.menu-min) .nav-list > li > a > .menu-text {
        display: inline !important;
        white-space: nowrap;
    }
    .sidebar.compact:not(.menu-min) .nav-list > li.active > a { box-shadow: inset 3px 0 0 var(--ck-accent); }
}
.sidebar .sidebar-toggle { border-top: 1px solid var(--ck-border) !important; margin-top: 8px; }
.sidebar .sidebar-toggle > .ace-icon { background: var(--ck-surface) !important; border-color: var(--ck-border) !important; color: var(--ck-muted) !important; }

/* Breadcrumbs */
.breadcrumbs { background: var(--ck-surface) !important; border-bottom: 1px solid var(--ck-border) !important; }

/* Targetes (widget-box) */
.widget-box {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border) !important;
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow);
    overflow: hidden;
}
.widget-box.transparent { background: transparent; box-shadow: none; }
.widget-header {
    background: var(--ck-surface) !important;
    border-bottom: 1px solid var(--ck-border) !important;
    color: var(--ck-text) !important;
    min-height: 44px;
    padding-left: 14px;
}
.widget-header > .widget-title { line-height: 42px; font-size: 15px; }
.widget-toolbox { background: #fafbfc !important; border-color: var(--ck-border) !important; }
.widget-body { background: transparent !important; border: 0 !important; }

/* Taules */
.table { background: var(--ck-surface); }
.table > thead > tr > th, .table > thead > tr {
    background: #f8fafc !important;
    background-image: none !important;
    color: var(--ck-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-color: var(--ck-border) !important;
}
.table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--ck-border) !important; vertical-align: middle; }
.table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: 8px 10px; }
.table-hover > tbody > tr:hover > td { background-color: var(--ck-hover); }
.table-bordered { border-color: var(--ck-border) !important; }
#buglist td.column-summary a, #buglist td.column-id a { font-weight: 500; }

/* Botons */
.btn {
    border-radius: 8px !important;
    border-width: 1px !important;
    font-weight: 500;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color .15s, border-color .15s;
}
.btn-primary, .btn-primary:focus, .btn.btn-primary {
    background: var(--ck-primary) !important;
    border-color: var(--ck-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn.btn-primary:hover { background: var(--ck-primary-dark) !important; border-color: var(--ck-primary-dark) !important; }
.btn-white, .btn-default {
    background: var(--ck-surface) !important;
    border-color: var(--ck-border) !important;
    color: var(--ck-text) !important;
}
.btn-white:hover, .btn-default:hover { background: var(--ck-hover) !important; }

/* Formularis */
.form-control, input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea {
    border: 1px solid var(--ck-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--ck-text);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: #6095e2 !important;
    box-shadow: 0 0 0 3px rgba(96, 149, 226, .18) !important;
    outline: 0;
}

/* Etiquetes i badges */
.label, .badge { border-radius: 999px; font-weight: 500; padding: .25em .7em; text-shadow: none; }

/* Peu */
.footer { padding-top: 0 !important; }
.footer .footer-inner .footer-content {
    border-top: 1px solid var(--ck-border) !important;
    background: transparent !important;
    padding: 10px 20px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ck-muted);
    font-size: 12px;
}
.footer .footer-content > div { width: auto !important; float: none !important; padding: 0 !important; }
.footer .footer-content address { margin: 0; }
#powered-by-clickame-logo img { max-height: 22px; width: auto; opacity: .8; }

/* Login */
.login-layout { background: var(--ck-bg) !important; }
.login-layout .widget-box { border-radius: 14px; }

/* Barres de botons (Exporta, Resum...) i botons de capçalera: menys pes visual */
.btn-group .btn-primary, .widget-toolbox .btn-primary, .btn-sm.btn-primary, .btn-xs.btn-primary {
    background: var(--ck-surface) !important;
    border-color: var(--ck-border) !important;
    color: var(--ck-text) !important;
}
.btn-group .btn-primary:hover, .widget-toolbox .btn-primary:hover, .btn-sm.btn-primary:hover, .btn-xs.btn-primary:hover {
    background: var(--ck-hover) !important;
}
.navbar .btn-primary, .navbar .btn {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}
.navbar .btn:hover { background: rgba(255, 255, 255, .16) !important; }

/* Capçaleres de filtre i columnes en gris, no blau */
.table th a, #filter_open th a, .widget-main .table th a { color: var(--ck-muted) !important; }
#filter_open .table td.small-caption, #filter_open .table th { font-weight: 500; }
.badge, .badge-grey { background: #efede8 !important; color: var(--ck-muted) !important; }

/* Llista d'incidències: estat en una línia amb un punt de color; sense columna Gravetat */
td.column-status { white-space: nowrap; }
td.column-status .fa-status-box { font-size: 10px !important; vertical-align: middle; margin-right: 4px; }
th.column-severity, td.column-severity { display: none !important; }