/* ===========================================================
   Theme C — Refined teal (current DNA, modernized)
   Drop-in replacement for global.css, same selectors preserved
   =========================================================== */

:root {
    --primary:        #0e7490;
    --primary-hover:  #155e75;
    --primary-light:  #06b6d4;
    --primary-soft:   #ecfeff;
    --primary-fg:     #ffffff;
    --accent:         #0891b2;

    --surface:        #ffffff;
    --surface-alt:    #f8fafc;
    --surface-warm:   #f5f5f4;

    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;

    --text:           #1f2937;
    --text-muted:     #4b5563;
    --text-on-dark:   #f8fafc;

    --header-bg:      #334155;
    --header-bg-deep: #1e293b;
    --header-fg:      #ffffff;
    --status-bg:      #1e293b;

    --row-1:          #ffffff;
    --row-2:          #f8fafc;
    --row-error-1:    #fee2e2;
    --row-error-2:    #fef2f2;
    --row-hover:      #ecfeff;

    --success-bg:     #15803d;
    --error-bg:       #b91c1c;

    --radius:         6px;
    --radius-lg:      10px;
    --radius-sm:      4px;

    --shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow:         0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:      0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg:      0 10px 20px -5px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);

    --font-stack:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

body {
    font-family: var(--font-stack);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text);
    margin: 0;
    background-color: var(--surface-warm);
}

#body_div {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: var(--surface-warm);
    background-image:
        radial-gradient(60% 55% at 12% 18%, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0) 100%),
        radial-gradient(55% 50% at 88% 25%, rgba(14, 116, 144, 0.20) 0%, rgba(14, 116, 144, 0) 100%),
        radial-gradient(55% 60% at 82% 85%, rgba(8, 145, 178, 0.18) 0%, rgba(8, 145, 178, 0) 100%),
        radial-gradient(60% 55% at 18% 92%, rgba(34, 211, 238, 0.14) 0%, rgba(34, 211, 238, 0) 100%);
    background-repeat: no-repeat;
}

#container {
    width: 1200px;
    margin: 0 auto;
    background-color: var(--surface);
    height: 100%;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: var(--shadow-lg);
}

form { margin: 0; border: 0; }

/* ---- Inputs ---- */
input[type="button"], input[type="submit"], input[type="number"] { -webkit-appearance: none; }

input[type="text"], input[type="password"], input[type="number"] {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.18);
}

textarea {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 14px;
}

select {
    -webkit-appearance: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 7px 28px 7px 10px;
    background: var(--surface) url('/images/selectbox_arrow.png') no-repeat right center;
    background-size: contain;
    font-family: inherit;
    font-size: 14px;
}

/* ---- Header / Nav ---- */
#master_header { background-color: var(--surface); border-bottom: 1px solid var(--border); }

#header_container { width: 800px; margin: 0 auto; }

#header_bar {
    background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-bg-deep) 100%);
    padding: 0;
    z-index: 999;
    box-shadow: var(--shadow-sm);
}
#header_bar:has(#login_box) { padding: 14px 0; }

#header_image { height: 180px; width: 780px; }

.header_fixed { position: fixed; top: 0; width: 100%; }

#status_bar {
    background-color: var(--status-bg);
    color: var(--text-on-dark);
    text-align: center;
    font-size: 12px;
    padding: 5px;
}

#footer_bar {
    background-color: var(--header-bg);
    padding: 5px;
    position: fixed;
    bottom: 0;
    width: 1190px;
}

#menu_content {
    margin: 0 auto;
    width: 1000px;
    color: var(--text-on-dark);
    text-align: center;
}

#login_box { padding: 6px; display: inline; color: var(--text-on-dark); }
#login_box th { font-size: 12px; text-align: left; font-weight: 500; padding-bottom: 4px; }

#login_button {
    border: 0;
    background-color: var(--primary);
    color: var(--primary-fg);
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}
#login_button:hover { background-color: var(--primary-hover); }

#login_splash {
    background: url("/images/surefibg.png");
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    bottom: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
}

#save_div {
    display: inline;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    background-color: var(--success-bg);
    color: #fff;
    font-weight: 600;
    z-index: 100001;
    text-align: center;
    margin: 0;
    box-shadow: var(--shadow-md);
}

#error_div {
    display: inline;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    background-color: var(--error-bg);
    color: #fff;
    font-weight: 600;
    z-index: 100001;
    text-align: center;
    margin: 0;
    box-shadow: var(--shadow-md);
}
#error_div ul { font-size: 12px; width: 400px; margin: 6px auto; text-align: left; }

#menu { text-align: left; display: inline; padding: 0; margin: 0; }

#menu li {
    display: inline-block;
    position: relative;
    padding: 16px 22px;
    cursor: pointer;
    color: var(--text-on-dark);
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.15s, color 0.15s;
}

#menu li:hover { background-color: var(--primary); color: #fff; }
#menu li.selected { background-color: var(--primary); color: #fff; }

#menu li ul {
    padding: 6px;
    position: absolute;
    top: 50px;
    left: 0;
    width: 220px;
    display: none;
    opacity: 0;
    visibility: hidden;
    background-color: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    transition: opacity 0.15s;
}

#menu li ul li {
    background: var(--surface);
    color: var(--text);
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}
#menu li ul li:hover { background-color: var(--primary-soft); color: var(--primary); }

#menu li:hover ul { display: block; opacity: 1; visibility: visible; }

/* ---- Content ---- */
#content_div { min-width: 800px; width: 95%; margin: 0 auto; padding: 20px 0 100px; }

/* ---- Tables: details ---- */
.details_table {
    margin: 22px auto;
    border: 1px solid var(--border);
    min-width: 500px;
    width: 500px;
    padding: 0;
    background-color: var(--surface);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.details_table td { padding: 9px 13px; background-color: var(--surface); border-top: 1px solid var(--border); }
.details_table th {
    padding: 9px 13px;
    text-align: right;
    background-color: var(--surface-alt);
    color: var(--text);
    font-weight: 600;
    border-top: 1px solid var(--border);
}

.details_table .header {
    background-color: var(--primary);
    color: var(--primary-fg);
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    padding: 12px 25px;
    border-bottom: 2px solid var(--header-bg-deep);
}

.details_table .subheader {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    padding: 7px 25px;
}

.details_table .footer {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    padding: 11px;
}

.details_table .footer input[type="button"], .details_table .footer input[type="submit"] {
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.details_table .footer input[type="button"]:hover, .details_table .footer input[type="submit"]:hover { background-color: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

.details_table .subheader input[type="button"], .details_table .subheader input[type="submit"] {
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* ---- device_type_values_table ---- */
.device_type_values_table {
    margin: 22px auto;
    border: 1px solid var(--border);
    min-width: 500px;
    width: 500px;
    padding: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.device_type_values_table .header {
    background-color: var(--primary);
    color: var(--primary-fg);
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    padding: 11px 25px;
    border-bottom: 2px solid var(--header-bg-deep);
}

.device_type_values_table .footer {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    font-weight: 600;
    font-size: 13px;
    padding: 6px;
    text-align: center;
}

.device_type_values_table .footer input {
    background-color: var(--header-bg-deep);
    color: var(--text-on-dark);
    font-weight: 600;
    font-size: 12px;
    padding: 5px 12px;
    text-align: center;
    border: 1px solid var(--text-on-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.device_type_values_table .footer input:hover { background-color: var(--primary); border-color: var(--primary); }

/* ---- order_dashboard_table ---- */
.order_dashboard_table {
    margin: 22px auto;
    border: 1px solid var(--border);
    min-width: 800px;
    width: 95%;
    padding: 0;
    background-color: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.order_dashboard_table th {
    background-color: var(--primary);
    color: var(--primary-fg);
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    padding: 11px 25px;
}

.order_dashboard_table .order_row {
    border: 1px solid var(--border);
    background-color: var(--surface-alt);
    padding: 6px;
    height: 100px;
    display: flex;
    border-radius: var(--radius-sm);
    margin: 5px;
}
.order_dashboard_table .order_id_div {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 4px;
    text-align: center;
    font-size: 22px;
    display: inline-flex;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.order_dashboard_table .order_distributor_div {
    background-color: var(--header-bg);
    display: inline-flex;
    width: 100px;
    height: 100px;
    margin-left: 5px;
    border-radius: var(--radius-sm);
}
.order_dashboard_table .order_content_div {
    background-color: var(--surface);
    display: inline-flex;
    margin-left: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px;
    flex-grow: 2;
}
.order_dashboard_table .order_paid_div, .order_dashboard_table .order_status_div {
    background-color: var(--surface);
    display: inline-flex;
    margin-left: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
    width: 150px;
}
.order_dashboard_table .order_paid_div div { height: 60px; width: 150px; text-align: center; vertical-align: middle; margin: 0; padding: 14px 0; }
.order_dashboard_table .order_status_div div { height: 88px; width: 150px; line-height: 88px; text-align: center; vertical-align: middle; margin: 0; padding: 0; }
.order_dashboard_table .product_div {
    background-color: var(--surface);
    display: inline-flex;
    margin-left: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
    width: 100px;
}
.order_dashboard_table .product_div div { height: 88px; width: 100px; text-align: center; vertical-align: middle; margin: 0; padding: 0; }

/* ---- results_table ---- */
.results_table {
    margin: 22px auto;
    border: 1px solid var(--border);
    min-width: 800px;
    width: 95%;
    padding: 0;
    background-color: var(--surface);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.results_table td { padding: 7px 11px; border-bottom: 1px solid var(--border); }
.results_table input[type="button"], .results_table input[type="submit"] {
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 5px 11px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
}
.results_table input[type="button"]:hover, .results_table input[type="submit"]:hover { background-color: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

.results_table .row_1 { background-color: var(--row-1); }
.results_table .row_2 { background-color: var(--row-2); }
.results_table .row_error_1 { background-color: var(--row-error-1); }
.results_table .row_error_2 { background-color: var(--row-error-2); }
.results_table .record:hover { background-color: var(--row-hover); }
.results_table .record { cursor: pointer; transition: background-color 0.1s; }

.results_table .header {
    background-color: var(--primary);
    color: var(--primary-fg);
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    padding: 12px 25px;
    border-bottom: 2px solid var(--header-bg-deep);
}

.results_table .subheader {
    background-color: var(--primary-light);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    padding: 7px 25px;
}

.results_table .search_box { border: 2px solid var(--header-bg-deep); padding: 7px; }
.results_table .search_box > table { display: block; width: 100%; }
.results_table .search_box > table tbody { display: block; width: 100%; }
.results_table .search_box > table tr { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; width: 100%; }
.results_table .search_box > table td { display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.results_table .search_box input[type=text],
.results_table .search_box select { width: 160px; box-sizing: border-box; height: 30px; }
.results_table .search_box td[align=right] { margin-left: auto; }

.results_table .footer {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    font-weight: 600;
    font-size: 14px;
    padding: 9px;
    text-align: center;
}

.results_table th {
    padding: 9px 11px;
    font-size: 14px;
    text-align: center;
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- hierarchy_table ---- */
.hierarchy_table {
    margin: 22px auto;
    border: 1px solid var(--border);
    min-width: 200px;
    width: 200px;
    padding: 5px;
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow);
}

.hierarchy_table td { padding: 5px; }
.hierarchy_table th { padding: 5px; text-align: right; }

.hierarchy_table .header {
    background-color: var(--primary);
    color: var(--primary-fg);
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    padding: 11px 25px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 2px solid var(--header-bg-deep);
}

.hierarchy_table .footer {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    padding: 8px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.hierarchy_table .footer input[type="button"], .details_table .footer input[type="submit"] {
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    cursor: pointer;
}

.hierarchy_table a { color: var(--text); text-decoration: none; }

.hierarchy_table .distributor, .hierarchy_table .dealer, .hierarchy_table .group, .hierarchy_table .user {
    border: 1px solid var(--border);
    margin: 3px 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.1s, border-color 0.1s;
}
.hierarchy_table .distributor { padding: 6px 15px 6px 6px; }
.hierarchy_table .dealer { padding: 6px 15px 6px 22px; }
.hierarchy_table .group { padding: 6px 15px 6px 36px; }
.hierarchy_table .user { padding: 6px 15px 6px 50px; }
.hierarchy_table .distributor:hover, .hierarchy_table .dealer:hover, .hierarchy_table .group:hover, .hierarchy_table .user:hover {
    background-color: var(--primary-soft);
    border-color: var(--primary);
}

/* ---- app_button ---- */
.app_button {
    background-color: var(--primary);
    color: var(--primary-fg);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 9px 24px;
    margin: 0 auto;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s, transform 0.05s;
}
.app_button:hover { background-color: var(--primary-hover); }
.app_button:active { transform: translateY(1px); }

/* ---- response_table ---- */
.response_table {
    border: 1px solid var(--border);
    background-color: var(--surface);
    padding: 4px;
    border-radius: var(--radius-sm);
}
.response_table .action_header { background-color: var(--header-bg); color: var(--text-on-dark); padding: 5px; border-radius: var(--radius-sm); }
.response_table .action_device_header { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.response_table .action_device_details { border: 1px solid var(--border-strong); background-color: var(--surface); border-radius: var(--radius-sm); }
.response_table td, .response_table th { font-size: 12px; }
.response_table input[type="button"] input[type="submit"] {
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.response_table p { margin: 2px; }
.response_table div { padding: 4px; margin: 2px 0; }

/* ---- inventory_table ---- */
#inventory_table { background-color: var(--surface); width: 100%; font-size: 14px; }
#inventory_table td { background-color: var(--surface); padding: 7px 11px; border-bottom: 1px solid var(--border); }
#inventory_table th {
    background-color: var(--header-bg);
    text-align: center;
    color: var(--text-on-dark);
    text-decoration: none;
    padding: 9px;
    font-weight: 600;
}