/* General Styles */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --heading-color: #333333;
    --accent-color: #007bff;
    --accent-hover: #0056b3;
    --button-disabled-bg: #ccc;
    --button-disabled-text: #666;
    --main-section-bg: #ffffff;
    --table-row-alt: #f2f2f2;
    --details-bg: #e9e9e9;
    --toggle-bg: #f5f5f5;
    --toggle-border: #333;
    --toggle-label: #333;
    --error-color: #ff4d4d;
    --link-color: #007bff;
    --subtle-text-color: #999999;
    --container-bg: #ffffff;
    --bg-color-contrast: #f4f4f4;
    --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    --table-bg: #ffffff;
    --table-border: #dddddd;
    --table-head-bg: #f0f0f0;
    --table-text: #000000;
    --status-valid-fg:   #166534;             /* emerald-800 */
    --status-valid-bg:   #ecfdf5;             /* emerald-50  */
    --status-valid-br:   #a7f3d0;             /* emerald-200 */
  
    --status-expiring-fg:#92400e;             /* amber-900   */
    --status-expiring-bg:#fffbeb;             /* amber-50    */
    --status-expiring-br:#fcd34d;             /* amber-300   */
  
    --status-expired-fg: #374151;             /* gray-700    */
    --status-expired-bg: #f3f4f6;             /* gray-100    */
    --status-expired-br: #d1d5db;             /* gray-300    */
  
    --status-revoked-fg: #991b1b;             /* red-800     */
    --status-revoked-bg: #fef2f2;             /* red-50      */
    --status-revoked-br: #fca5a5;             /* red-300     */
  
    --row-revoked-bg:    #fff1f2;             /* red-50 tint */
    --row-expired-bg:    #f9fafb;             /* gray-50     */

    /* unset workspace */
    --danger-bg:#dc26261a;    /* deep red for contrast on dark */
    --danger-border:#dc26261a;/* red-500 */
    --danger-text:#7f1d1d;  /* light red text */
    --muted:#000000;        /* gray-200 */

    --danger-btn-bg: #9a3a40;   /* desat red-brown */
    --danger-btn-text: #f0eaea; /* warm off-white */
    --danger-btn-hover: #862f35;
    --danger-btn-active:#71272c;
    --danger-btn-disabled:#5b2428;

    /* cert import */
    --tile-bg: var(--container-bg);
    --tile-br: var(--table-border);
    --tile-muted-text: var(--subtle-text-color);
  
    --tile-okay-fg: var(--status-valid-fg);
    --tile-okay-bg: var(--status-valid-bg);
    --tile-okay-br: var(--status-valid-br);
  
    --tile-info-fg: #0b5cab;
    --tile-info-bg: rgba(14,165,233,.10);
    --tile-info-br: rgba(14,165,233,.35);

    --field-error-label: rgba(255,90,90,0.95);
}
  
/* Dark theme overrides */
[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #f0f0f0;
    --heading-color: #ffffff;
    --accent-color: #0ea5e9;
    --accent-hover: #0284c7;
    --button-disabled-bg: #444;
    --button-disabled-text: #aaa;
    --main-section-bg: #1e1e1e;
    --table-row-alt: #2a2a2a;
    --details-bg: #2b2b2b;
    --toggle-bg: #1a1a1a;
    --toggle-border: #555;
    --toggle-label: #ccc;
    --error-color: #ff6b6b;
    --link-color: #76b7ff;
    --subtle-text-color: #888888;
    --container-bg: #232323;
    --bg-color-contrast: #121212;
    --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    --table-bg: #1e1e1e;
    --table-border: #333333;
    --table-head-bg: #2b2b2b;
    --table-text: #f0f0f0;
    --status-valid-fg:   #34d399;             /* emerald-400 */
    --status-valid-bg:   rgba(16,185,129,.16);
    --status-valid-br:   rgba(16,185,129,.35);
  
    --status-expiring-fg:#fbbf24;             /* amber-400   */
    --status-expiring-bg:rgba(251,191,36,.12);
    --status-expiring-br:rgba(251,191,36,.35);
  
    --status-expired-fg: #9ca3af;             /* gray-400    */
    --status-expired-bg: rgba(156,163,175,.12);
    --status-expired-br: rgba(156,163,175,.35);
  
    --status-revoked-fg: #f87171;             /* red-400     */
    --status-revoked-bg: rgba(239,68,68,.12);
    --status-revoked-br: rgba(239,68,68,.35);
  
    --row-revoked-bg:    rgba(239,68,68,.08);
    --row-expired-bg:    rgba(156,163,175,.06);

    /* unset workspace */
    --danger-bg:#4a0f0f;
    --danger-border:#ef4444;
    --danger-text:#ffd1d1;
    --muted:#e5e7eb;

    --danger-btn-bg: #6b2a2f;
    --danger-btn-text: #e7e0e0;
    --danger-btn-hover: #5c2429;
    --danger-btn-active:#4c1e22;
    --danger-btn-disabled:#3c191c;

    /* cert import */
    --tile-bg: var(--container-bg);
    --tile-br: var(--table-border);
    --tile-muted-text: var(--subtle-text-color);
  
    --tile-info-fg: #60a5fa;
    --tile-info-bg: rgba(14,165,233,.12);
    --tile-info-br: rgba(14,165,233,.35);

    --chip-bg: #333;
    --field-error-label: rgba(255,150,150,0.95);
}

.input-theme {
    background-color: var(--toggle-bg);
    border: 1px solid var(--toggle-border);
    color: var(--text-color);
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    width: calc(100% - 20px);
}

.label-theme {
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 8px;
    display: block;
}

.section-spacing {
    margin-bottom: 20px;
}

:root[data-theme="light"] #storageImageArrow {
    content: url('/images/chev-down-light.svg');
}
:root[data-theme="dark"] #storageImageArrow {
    content: url('/images/chev-down-dark.svg');
}

:root[data-theme="dark"] .securitlsImage {
    content: url('/images/securitls-dk.png');
}

:root[data-theme="dark"] #AWSACM {
    content: url('/images/AWS-Cloud-logo_32.png');
}

:root[data-theme="dark"] #securitlsLogo {
    content: url('/images/securitlslogo-dk.png');
}  

.theme-toggle {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 10px 0;
}

.theme-toggle button {
    font-size: 20px;
    background: transparent;
    border: 1px solid var(--table-border);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    color: var(--text-color);
}

.theme-toggle button.active {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.theme-toggle button:hover {
    background-color: var(--accent-hover);
    color: #fff;
    border-color: var(--accent-hover);
}

.alert-danger{
    margin-bottom:16px;
    padding:12px 14px;
    border-radius:8px;
    background:var(--danger-bg);
    border:1px solid var(--danger-border);
    color:var(--danger-text);
    font-size:14px;
    line-height:1.45;
}
  
.confirm-text{
    display:block;
    margin:0 0 16px 0;
    font-size:14px;
    color:var(--muted);
}

/* default fallback (system light) */
body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}