/* Scriptmanage — mobile-first responsive CSS */

/* Theme tokens — Client Admin can override these via theme.php.
   Header.php injects a per-client <style> block that re-defines these
   variables on :root, so changes only apply to that client's users.

   All blue tones are unified to deep navy (matching the ScriptInfinite logo). */
:root {
    --navy:           #1e3a8a;    /* deep navy — primary brand colour */
    --navy-deep:      #172554;    /* slightly darker, for hover */
    --page-bg:        #f5f7fa;
    --page-fg:        #222222;
    --link:           #1e3a8a;
    --topbar-bg:      #ffffff;
    --topbar-border:  #e5e7eb;
    --card-bg:        #ffffff;
    --card-fg:        #222222;
    --primary-bg:     #1e3a8a;
    --primary-fg:     #ffffff;
    --primary-hover:  #172554;
    --table-head-bg:  #1e3a8a;
    --table-head-fg:  #ffffff;
    --row-odd:        #ffffff;
    --row-even:       #eef4ff;
    --row-hover:      #dbeafe;
    --company-fg:     #1e3a8a;
    --username-fg:    #15803d;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--page-fg);
    line-height: 1.5;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Top bar */
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: .55rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto;   /* leftLogo | nav | userArea | rightLogo */
    align-items: center;
    gap: 1rem;
}
.topbar-logo { display: inline-flex; align-items: center; }
.topbar-logo img { display: block; height: 44px; width: auto; }
.topbar-logo.left img  { height: 44px; }
.topbar-logo.right { flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; }
.topbar-logo.right:hover { text-decoration: none; }
.topbar-logo.right img { height: 81px; }   /* Scriptmanage logo — 1.5x of previous 54 */
.topbar-logo.right .product-tagline-inline {
    /* 20% bigger than the landing-page tagline (1rem -> 1.2rem) */
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .3px;
    color: #1e3a8a;
    line-height: 1;
}

.brand { color: #1f2937; font-weight: 700; font-size: 1.05rem; }

.mainnav { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.mainnav a { color: #374151; padding: .3rem .55rem; border-radius: 4px; font-weight: 500; }
.mainnav a.active, .mainnav a:hover { color: #1e3a8a; background: #eff6ff; text-decoration: none; }
/* User area on the right (logo height = 81px):
   - Logout pinned to TOP (aligns with top of logo image)
   - Company name centered vertically (aligns with logo middle)
   - User name immediately below company name (deep green) */
.user-area {
    position: relative;
    height: 81px;                 /* matches .topbar-logo.right img height */
    min-width: 200px;
}
.user-area .logout {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    background: var(--primary-bg);   /* themable */
    color: var(--primary-fg);
    border: none;
    font-weight: 600;
    padding: .28rem .95rem;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1.2;
}
.user-area .logout:hover {
    background: var(--primary-hover);
    color: var(--primary-fg);
    text-decoration: none;
}
.user-area .company-line {
    position: absolute;
    right: 0;
    top: 50%;                     /* line center at logo middle */
    transform: translateY(-50%);
    color: var(--company-fg);     /* deep blue (themable) */
    font-weight: 700;             /* bold */
    font-size: .95rem;
    white-space: nowrap;
    line-height: 1.1;
}
.user-area .username-line {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: 12px;             /* sits just below the company line */
    color: var(--username-fg);    /* deep green (themable) */
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    line-height: 1.1;
}
/* When the user has no client (SuperAdmin), company line is absent;
   center the username on the logo middle instead. */
.user-area:not(:has(.company-line)) .username-line {
    margin-top: 0;
    transform: translateY(-50%);
}
.role-chip { display: inline-block; padding: 1px 6px; margin-left: 4px; border-radius: 8px; font-size: .7rem; background: #4b5563; color: #fff; }
.role-superadmin { background: #b91c1c; }
.role-admin { background: #1e3a8a; }
.role-member { background: #047857; }
.client-chip {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 4px;
    border-radius: 8px;
    font-size: .78rem;
    background: transparent;
    color: #1e3a8a;               /* deep blue */
    font-weight: 700;             /* bold */
}

.nav-toggle { display: none; background: none; border: 1px solid #d1d5db; border-radius: 6px; color: #1f2937; font-size: 1.2rem; padding: 2px 10px; cursor: pointer; }

@media (max-width: 820px) {
    /*
     * Mobile layout:
     *   row 1:  [SI logo]  [Company centered between logos]  [Scriptmanage logo]
     *   row 2:  ............................................. [Logout]
     *   row 3:  [Username centered on the whole screen — full width]
     *   row 4:  ☰ toggle (left)
     *   row 5:  nav links (full width, when toggle clicked)
     */
    .topbar-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-auto-rows: auto;
        align-items: center;
        gap: .3rem .7rem;
    }

    .topbar-logo.left  { grid-row: 1 / span 2; grid-column: 1; align-self: center; }
    .topbar-logo.right { grid-row: 1; grid-column: 3; align-self: center; justify-self: end; }

    /* Children of .user-area participate directly in the parent grid */
    .user-area { display: contents; }

    .user-area .company-line {
        grid-row: 1; grid-column: 2;
        justify-self: center; align-self: center;
        text-align: center;
        white-space: normal;
        max-width: 100%;
        line-height: 1.2;
        margin: 0;
        font-size: .95rem;
        position: static; transform: none; top: auto; right: auto;
    }
    /* Logout pinned to row 2 right edge */
    .user-area .logout {
        grid-row: 2; grid-column: 3;
        justify-self: end; align-self: center;
        background: var(--primary-bg);
        color: var(--primary-fg);
        border: none;
        padding: .25rem .85rem;
        font-weight: 600;
        position: static; transform: none; top: auto; right: auto;
        z-index: 2;
    }
    .user-area .logout:hover {
        background: var(--primary-hover);
        color: var(--primary-fg);
    }
    /* Username on the SAME row 2, spanning all columns → truly centered on screen.
       z-index below Logout so the button sits cleanly on top if they ever overlap. */
    .user-area .username-line {
        grid-row: 2; grid-column: 1 / -1;
        justify-self: center;
        align-self: center;
        text-align: center;
        white-space: normal;
        max-width: calc(100% - 8rem);   /* leave room for Logout on the right */
        line-height: 1.2;
        margin: 0;
        font-size: .9rem;
        color: var(--username-fg);       /* themable */
        font-weight: 600;
        position: static; transform: none; top: auto; right: auto;
        z-index: 1;
    }

    .nav-toggle {
        grid-row: 3; grid-column: 1;
        justify-self: start;
        display: inline-block;
    }
    .mainnav {
        display: none;
        grid-row: 4; grid-column: 1 / -1;
        flex-direction: column;
        align-items: flex-start;
        padding-top: .5rem;
        border-top: 1px solid #e5e7eb;
        margin: 0;
    }
    body.nav-open .mainnav { display: flex; }

    .topbar-logo.left img  { height: 36px; }
    .topbar-logo.right img { height: 68px; }   /* Scriptmanage logo — 1.5x of previous 45 */
    .topbar-logo.right .product-tagline-inline { font-size: 1rem; }
}

/* Container */
.container { max-width: 1200px; margin: 1rem auto; padding: 0 1rem 3rem; }

/* Cards */
.card { background: var(--card-bg); color: var(--card-fg); border-radius: 8px; padding: 1.2rem; margin-bottom: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.card h2 { margin-top: 0; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a {
    padding: .55rem 1rem; color: #4b5563; border-bottom: 2px solid transparent;
    margin-bottom: -2px; font-weight: 500;
}
.tabs a.active { color: #1e3a8a; border-bottom-color: #1e3a8a; }
.tabs a:hover { text-decoration: none; color: #1e3a8a; }

/* Tables */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: #fff; }
table.list th, table.list td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid #e5e7eb; vertical-align: top; }

/* Heading row: themable */
table.list thead th {
    background: var(--table-head-bg);
    color: var(--table-head-fg);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: none;
}
table.list thead th a { color: var(--table-head-fg); text-decoration: underline; }

/* Alternating row hues — themable */
table.list tbody tr:nth-child(odd)  td { background: var(--row-odd); }
table.list tbody tr:nth-child(even) td { background: var(--row-even); }
table.list tbody tr:hover td { background: var(--row-hover); }

/* Bar above tables — Show button + filter dropdowns sit on the same row */
.list-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: .8rem;
}
.list-controls form { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.list-controls label { font-size: .85rem; color: #4b5563; font-weight: 600; margin: 0; }
.list-controls select {
    padding: .3rem .6rem;
    font-size: .9rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    min-width: 140px;
}

/* Column selector panel (above tables) */
.col-selector {
    display: inline-block; position: relative;
}
.col-selector .col-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; font-size: .85rem;
    background: #f3f4f6; color: #374151; border: 1px solid #d1d5db;
    border-radius: 6px; cursor: pointer;
}
.col-selector .col-toggle:hover { background: #e5e7eb; }
.col-selector .col-panel {
    display: none; position: absolute; z-index: 50;
    top: 100%; left: 0; margin-top: 4px;
    min-width: 240px;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    padding: .6rem 1rem;
}
.col-selector.open .col-panel { display: block; }
.col-selector .col-panel label {
    display: flex; align-items: center; gap: .4rem;
    margin: .25rem 0; font-size: .9rem; font-weight: 500;
    cursor: pointer; color: #1f2937;
}
.col-selector .col-panel label input { margin: 0; }

/* Mobile: switch table to 2-line card layout (≤820px to match the rest of the mobile rules) */
@media (max-width: 820px) {
    table.list { display: block; }
    /* Column header bar — single deep-navy strip listing the visible columns */
    table.list thead {
        display: block;
        background: var(--table-head-bg);
        color: var(--table-head-fg);
    }
    table.list thead tr { display: block; padding: .4rem .7rem; }
    table.list thead th {
        display: inline-block;
        background: transparent;
        color: var(--table-head-fg);
        padding: 0;
        border: none;
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    table.list thead th:empty { display: none; }
    table.list thead th:not(:first-of-type):not(:empty)::before {
        content: " · ";
        opacity: .7;
        padding: 0 .25rem;
        font-weight: 400;
    }
    table.list tbody { display: block; }
    table.list tr {
        display: block;
        padding: .55rem .55rem;
        border-bottom: 1px solid #e5e7eb;
    }
    /* Alternating card hues on mobile too */
    table.list tbody tr:nth-child(odd)  { background: var(--row-odd); }
    table.list tbody tr:nth-child(even) { background: var(--row-even); }
    table.list tbody tr:hover { background: var(--row-hover); }
    table.list tr:hover td,
    table.list tbody tr:nth-child(odd) td,
    table.list tbody tr:nth-child(even) td {
        background: transparent;   /* let the row colour show */
    }
    table.list td {
        display: inline-block;
        padding: 0;
        border: none;
        vertical-align: baseline;
    }
    /* line 1: id + title (left) + status (right) on the same row */
    table.list td[data-col="id"] {
        display: inline-block;
        font-weight: 700;
        color: #1e3a8a;
        margin-right: .5rem;
        font-size: 1rem;
    }
    table.list td[data-col="id"]::before {
        content: "#";
        opacity: .6;
    }
    table.list td[data-line="1-title"] {
        display: inline;
        font-size: 1rem;
        font-weight: 600;
    }
    /* wrap line 1 with a soft break before line 2 */
    table.list td[data-line="1-title"]::after {
        content: "";
        display: block;
        height: 0;
    }
    table.list td[data-line="1-status"] {
        position: absolute;
        right: .55rem;
        top: .55rem;
    }
    table.list tr { position: relative; padding-right: 5rem; }   /* room for status badge */

    /* line 2: secondary fields inline, dot separated */
    table.list td[data-line="2"] {
        display: inline-block;
        font-size: .82rem;
        color: #4b5563;
        margin-top: .15rem;
    }
    table.list td[data-line="2"]:not(:last-of-type)::after {
        content: " · ";
        color: #9ca3af;
        padding: 0 .15rem;
    }
    /* labels prepended when meaningful */
    table.list td[data-mobile-label]::before {
        content: attr(data-mobile-label) ": ";
        color: #9ca3af;
        font-weight: 500;
    }
    /* Hide cells whose column has no mobile placement */
    table.list td:not([data-line]):not([data-col="id"]):not([data-col="actions"]) { display: none; }
    /* Place the "actions" cell on its own line at the right */
    table.list td[data-col="actions"] {
        display: block;
        text-align: right;
        margin-top: .35rem;
    }
}

/* Forms */
form .row { margin-bottom: .8rem; }
form label { display: block; font-weight: 600; margin-bottom: .25rem; color: #374151; font-size: .9rem; }
form input[type=text], form input[type=email], form input[type=password],
form input[type=date], form input[type=number], form select, form textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 1rem; background: #fff;
}
form textarea { min-height: 80px; }
form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) {
    form .grid2, form .grid3 { grid-template-columns: 1fr; }
}

.btn { display: inline-block; padding: .55rem 1.1rem; border-radius: 6px;
       background: var(--primary-bg); color: var(--primary-fg); border: none; font-size: 1rem; cursor: pointer; }
.btn:hover { background: var(--primary-hover); text-decoration: none; color: var(--primary-fg); }
.btn-secondary { background: #6b7280; }
.btn-secondary:hover { background: #4b5563; }
.btn-success { background: #047857; }
.btn-success:hover { background: #065f46; }
.btn-danger  { background: #b91c1c; }
.btn-danger:hover { background: #991b1b; }
.btn-sm { padding: .3rem .65rem; font-size: .85rem; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 600; }
.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-progress { background: #dbeafe; color: #172554; }
.badge-done     { background: #d1fae5; color: #065f46; }
.badge-open     { background: #fee2e2; color: #991b1b; }
.badge-info     { background: #dbeafe; color: #172554; }
.badge-warn     { background: #fef3c7; color: #92400e; }
.badge-error    { background: #fee2e2; color: #991b1b; }
.badge-default  { background: #e5e7eb; color: #374151; }
.badge-private  { background: #ede9fe; color: #5b21b6; }

/* Flash messages */
.flash { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .95rem; }
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: #dbeafe; color: #172554; border: 1px solid #93c5fd; }

/* ===== Login: split landing page ===== */
.landing {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background:
        radial-gradient(at 0% 0%, #dbeafe 0%, transparent 50%),
        radial-gradient(at 100% 100%, #ede9fe 0%, transparent 50%),
        #f5f7fa;
}
.landing-left {
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.landing-left img {
    max-width: 90%;
    width: 460px;
    height: auto;
}
.landing-right {
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.landing-box {
    width: 100%; max-width: 420px;
    background: #fff; border-radius: 14px; padding: 2rem;
    box-shadow: 0 8px 30px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.05);
}
.landing-box .product-logo {
    display: block; margin: 0 auto .4rem; max-width: 273px; height: auto;   /* 30% smaller than 390 */
}
.landing-box .product-tagline {
    text-align: center;
    color: #1e3a8a;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .3px;
    margin: 0 0 1.4rem;
    font-size: 1rem;
}
.landing-box h1 { display: none; }   /* logo replaces title */
.landing-box .btn { width: 100%; margin-top: .3rem; }
.landing-box .hint { text-align: center; font-size: .85rem; margin-top: 1rem; color: #6b7280; }
.landing-box .hint a { font-weight: 500; }

@media (max-width: 820px) {
    .landing { grid-template-columns: 1fr; min-height: 100dvh; }
    .landing-left { padding: 1.5rem 1rem .5rem; }
    .landing-left img { width: 320px; }
    .landing-right { padding: 1rem 1rem 2rem; }
}

/* Login fallback (older standalone form) */
.login-wrap { max-width: 380px; margin: 6vh auto; padding: 2rem; background: #fff;
              border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.login-wrap h1 { margin: 0 0 1rem; text-align: center; }
.login-wrap .btn { width: 100%; }

/* Footer */
.footer { text-align: center; padding: 1rem; color: #6b7280; font-size: .85rem; }

/* Inline list of issues / clarifications */
.thread { border-left: 3px solid #d1d5db; padding-left: 1rem; margin: .8rem 0; }
.thread .meta { font-size: .8rem; color: #6b7280; }
.thread.resolved, .thread.answered { border-left-color: #34d399; }

/* Hidden helper used by Details toggle on task_view.php */
.hidden { display: none !important; }

/* Assignment / activity thread */
.thread-list { list-style: decimal; padding-left: 1.3rem; margin: 0; }
.thread-list li { padding: .35rem 0; border-bottom: 1px dashed #e5e7eb; }
.thread-list li:last-child { border-bottom: none; }

/* Small util */
.muted { color: #6b7280; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
hr.sep { border: none; border-top: 1px solid #e5e7eb; margin: 1.2rem 0; }