:root {
    /* Atlassian Colors (approximations) */
    --adg-color-N0: #FFFFFF;    /* White */
    --adg-color-N20: #F4F5F7;   /* Light Gray (Background) */
    --adg-color-N30: #EBECF0;   /* Lighter Gray (Borders, UI elements) */
    --adg-color-N40: #DFE1E6;   /* Light Gray (Borders) */
    --adg-color-N50: #CSD0D9;   /* Gray (UI elements) */
    --adg-color-N90: #7A869A;   /* Medium Gray (Secondary Text) */
    --adg-color-N500: #42526E;  /* Dark Gray (Primary Text) */
    --adg-color-N800: #172B4D;  /* Darkest Gray (Headings) */

    --adg-color-B50: #DEEBFF;   /* Light Blue (Backgrounds) */
    --adg-color-B100: #B3D4FF;  /* Lighter Blue */
    --adg-color-B400: #0052CC;  /* Blue (Primary Action, Links) */
    --adg-color-B500: #0747A6;  /* Darker Blue (Primary Hover) */

    --adg-color-G50: #E3FCEF;   /* Light Green (Success Background) */
    --adg-color-G300: #36B37E;  /* Green (Success Text) */
    --adg-color-G500: #00875A;  /* Dark Green (Success Strong) */

    --adg-color-R50: #FFEBE6;   /* Light Red (Danger Background) */
    --adg-color-R300: #FF5630;  /* Red (Danger Text) */
    --adg-color-R500: #DE350B;  /* Dark Red (Danger Strong) */

    --adg-color-Y50: #FFFAE6;   /* Light Yellow (Warning Background) */
    --adg-color-Y300: #FFAB00;  /* Yellow (Warning Text) */
    --adg-color-Y500: #FF8B00;  /* Dark Yellow (Warning Strong) */

    /* Typography */
    --adg-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --adg-font-size-small: 12px;
    --adg-font-size-medium: 14px; /* Base font size */
    --adg-font-size-large: 16px;
    --adg-font-size-xlarge: 20px;
    --adg-font-size-xxlarge: 24px;

    /* Spacing */
    --adg-spacing-xs: 4px;
    --adg-spacing-s: 8px;
    --adg-spacing-m: 16px;
    --adg-spacing-l: 24px;
    --adg-spacing-xl: 32px;

    /* Borders */
    --adg-border-radius: 3px;
    --adg-border-color: var(--adg-color-N40);
    --adg-border-width: 1px; /* Changed from 2px for a lighter feel */

    /* Shadows - Atlassian uses subtle shadows */
    --adg-shadow-xs: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31); /* For small elements like dropdowns */
    --adg-shadow-s: 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31); /* For cards, modals */
}

/* Basic Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--adg-font-family);
    font-size: var(--adg-font-size-medium);
    line-height: 1.5;
    color: var(--adg-color-N500);
    background-color: var(--adg-color-N20);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------------------
   2. Typography
----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--adg-color-N800);
    font-weight: 600; /* Semibold for headings */
    margin-bottom: var(--adg-spacing-m);
}

h1 { font-size: var(--adg-font-size-xxlarge); line-height: 1.2; }
h2 { font-size: var(--adg-font-size-xlarge); line-height: 1.25; }
h3 { font-size: var(--adg-font-size-large); line-height: 1.3; }
h4 { font-size: var(--adg-font-size-medium); font-weight: 600; } /* Medium but bold */
p {
    margin-bottom: var(--adg-spacing-m);
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--adg-color-B400);
    text-decoration: none;
}
a:hover {
    color: var(--adg-color-B500);
    text-decoration: underline;
}

small {
    font-size: var(--adg-font-size-small);
    color: var(--adg-color-N90);
}

hr {
    border: none;
    border-top: var(--adg-border-width) solid var(--adg-border-color);
    margin: var(--adg-spacing-m) 0;
}

/* -----------------------------------------------------------------------------
   3. Buttons
   ADG Button styles: https://atlassian.design/components/button/examples
----------------------------------------------------------------------------- */
.adg-button {
    display: inline-flex; /* Changed from inline-block for better alignment of text/icons */
    align-items: center;
    justify-content: center;
    font-family: var(--adg-font-family);
    font-size: var(--adg-font-size-medium);
    font-weight: 500; /* Medium weight */
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: var(--adg-border-width) solid transparent;
    padding: var(--adg-spacing-s) var(--adg-spacing-m); /* Consistent padding */
    border-radius: var(--adg-border-radius);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    line-height: 1.4; /* Adjusted for better vertical centering */
    white-space: nowrap; /* Prevent wrapping */
}

.adg-button:focus {
    outline: 2px solid var(--adg-color-B100); /* Focus ring */
    outline-offset: 2px;
}
.adg-button:disabled,
.adg-button.is-disabled {
    opacity: 0.6; /* Atlassian uses 0.4 for text on disabled, bg is lighter */
    cursor: not-allowed;
    /* pointer-events: none; /* Be careful with this, can break things */
}

/* Default Button (Standard) */
.adg-button--default {
    background-color: var(--adg-color-N30); /* Light gray background */
    border-color: var(--adg-color-N40); /* Slightly darker border */
    color: var(--adg-color-N800); /* Dark text */
}
.adg-button--default:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--adg-color-N40); /* Slightly darker on hover */
    border-color: var(--adg-color-N50);
}
.adg-button--default:active:not(:disabled):not(.is-disabled) {
    background-color: var(--adg-color-B50); /* Blueish tint on active */
    border-color: var(--adg-color-B100);
}


/* Primary Button */
.adg-button--primary {
    background-color: var(--adg-color-B400);
    border-color: var(--adg-color-B400);
    color: var(--adg-color-N0);
}
.adg-button--primary:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--adg-color-B500); /* Darker blue */
    border-color: var(--adg-color-B500);
}
.adg-button--primary:active:not(:disabled):not(.is-disabled) {
    background-color: #003884; /* Even darker blue */
    border-color: #003884;
}

/* Subtle Button (Link-like) */
.adg-button--subtle {
    background-color: transparent;
    border-color: transparent;
    color: var(--adg-color-N500);
}
.adg-button--subtle:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--adg-color-N30); /* Light gray subtle hover */
}
.adg-button--subtle:active:not(:disabled):not(.is-disabled) {
    background-color: var(--adg-color-B50); /* Blueish tint on active */
    color: var(--adg-color-B500);
}

/* Danger Button */
.adg-button--danger {
    background-color: var(--adg-color-R500);
    border-color: var(--adg-color-R500);
    color: var(--adg-color-N0);
}
.adg-button--danger:hover:not(:disabled):not(.is-disabled) {
    background-color: #BF2600; /* Darker red */
    border-color: #BF2600;
}

/* Button Sizes */
.adg-button--small {
    font-size: var(--adg-font-size-small);
    padding: calc(var(--adg-spacing-xs) - 1px) var(--adg-spacing-s); /* Adjusted for smaller line height */
}
.adg-button--large {
    font-size: var(--adg-font-size-large);
    padding: var(--adg-spacing-s) var(--adg-spacing-l);
}

/* -----------------------------------------------------------------------------
   4. Forms
   ADG Form styles: https://atlassian.design/components/textfield/examples
----------------------------------------------------------------------------- */
.adg-form-group {
    margin-bottom: var(--adg-spacing-m);
}

.adg-form-label {
    display: block;
    font-weight: 600; /* Semibold for labels */
    color: var(--adg-color-N500);
    margin-bottom: var(--adg-spacing-xs);
    font-size: var(--adg-font-size-medium);
}

.adg-form-input,
.adg-form-textarea,
.adg-form-select {
    display: block;
    width: 100%;
    font-family: var(--adg-font-family);
    font-size: var(--adg-font-size-medium);
    color: var(--adg-color-N800);
    background-color: var(--adg-color-N0); /* White background */
    border: var(--adg-border-width) solid var(--adg-border-color);
    border-radius: var(--adg-border-radius);
    padding: var(--adg-spacing-s) var(--adg-spacing-m); /* Consistent padding */
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.adg-form-input:focus,
.adg-form-textarea:focus,
.adg-form-select:focus {
    border-color: var(--adg-color-B400); /* Blue border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px var(--adg-color-B100); /* Blue focus ring */
}

.adg-form-input::placeholder,
.adg-form-textarea::placeholder {
    color: var(--adg-color-N90);
    opacity: 1; /* Firefox */
}

.adg-form-input:disabled,
.adg-form-textarea:disabled,
.adg-form-select:disabled {
    background-color: var(--adg-color-N20); /* Lighter background for disabled */
    opacity: 0.7;
    cursor: not-allowed;
}

.adg-form-textarea {
    min-height: 80px; /* Default height for textareas */
    resize: vertical;
}

/* Helper text or error messages */
.adg-form-helper-text {
    font-size: var(--adg-font-size-small);
    color: var(--adg-color-N90);
    margin-top: var(--adg-spacing-xs);
}
.adg-form-error-text {
    font-size: var(--adg-font-size-small);
    color: var(--adg-color-R300); /* Red for errors */
    margin-top: var(--adg-spacing-xs);
}
.adg-form-input.is-invalid,
.adg-form-textarea.is-invalid,
.adg-form-select.is-invalid {
    border-color: var(--adg-color-R300);
}
.adg-form-input.is-invalid:focus,
.adg-form-textarea.is-invalid:focus,
.adg-form-select.is-invalid:focus {
    box-shadow: 0 0 0 2px var(--adg-color-R50); /* Light red focus ring */
}


/* -----------------------------------------------------------------------------
   5. Layout & Cards
----------------------------------------------------------------------------- */
.adg-container {
    width: 100%;
    padding-right: var(--adg-spacing-m);
    padding-left: var(--adg-spacing-m);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .adg-container { max-width: 540px; }
}
@media (min-width: 768px) {
    .adg-container { max-width: 720px; }
}
@media (min-width: 992px) {
    .adg-container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .adg-container { max-width: 1140px; }
}

.adg-card {
    background-color: var(--adg-color-N0);
    border: var(--adg-border-width) solid var(--adg-border-color);
    border-radius: var(--adg-border-radius);
    box-shadow: var(--adg-shadow-xs); /* Subtle shadow */
    margin-bottom: var(--adg-spacing-m);
}

.adg-card-header {
    padding: var(--adg-spacing-m);
    border-bottom: var(--adg-border-width) solid var(--adg-border-color);
    font-size: var(--adg-font-size-large);
    font-weight: 500;
    color: var(--adg-color-N800);
}
.adg-card-header:first-child {
    border-radius: var(--adg-border-radius) var(--adg-border-radius) 0 0;
}

.adg-card-body {
    padding: var(--adg-spacing-m);
}

.adg-card-footer {
    padding: var(--adg-spacing-s) var(--adg-spacing-m);
    background-color: var(--adg-color-N20); /* Slightly different background for footer */
    border-top: var(--adg-border-width) solid var(--adg-border-color);
}
.adg-card-footer:last-child {
    border-radius: 0 0 var(--adg-border-radius) var(--adg-border-radius);
}

/* -----------------------------------------------------------------------------
   6. Navigation (Basic Example)
   ADG Navigation: https://atlassian.design/components/navigation/examples
----------------------------------------------------------------------------- */
.adg-nav {
    background-color: var(--adg-color-N800); /* Dark background for main nav */
    padding: 0 var(--adg-spacing-m);
}
.adg-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.adg-nav li {
    /* display: inline-block; */ /* flex handles this */
}
.adg-nav a {
    display: block;
    padding: var(--adg-spacing-m);
    color: var(--adg-color-N0); /* White text */
    text-decoration: none;
    font-weight: 500;
}
.adg-nav a:hover,
.adg-nav a.is-active {
    background-color: var(--adg-color-B500); /* Blue hover/active */
}

/* Sidebar Navigation Example (Lighter) */
.adg-sidebar-nav {
    background-color: var(--adg-color-N20);
    padding: var(--adg-spacing-s) 0;
    border-right: var(--adg-border-width) solid var(--adg-border-color);
}
.adg-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.adg-sidebar-nav a {
    display: block;
    padding: var(--adg-spacing-s) var(--adg-spacing-m);
    color: var(--adg-color-N500);
    text-decoration: none;
}
.adg-sidebar-nav a:hover {
    background-color: var(--adg-color-N30);
}
.adg-sidebar-nav a.is-active {
    background-color: var(--adg-color-B50); /* Light blue for active */
    color: var(--adg-color-B500);
    font-weight: 600;
    border-left: 3px solid var(--adg-color-B400); /* Active indicator */
    padding-left: calc(var(--adg-spacing-m) - 3px);
}


/* -----------------------------------------------------------------------------
   7. Utility Classes
----------------------------------------------------------------------------- */
.adg-text-center { text-align: center !important; }
.adg-text-left { text-align: left !important; }
.adg-text-right { text-align: right !important; }

.adg-m-0 { margin: 0 !important; }
.adg-mt-1 { margin-top: var(--adg-spacing-xs) !important; }
.adg-mb-1 { margin-bottom: var(--adg-spacing-xs) !important; }
.adg-mt-2 { margin-top: var(--adg-spacing-s) !important; }
.adg-mb-2 { margin-bottom: var(--adg-spacing-s) !important; }
.adg-mt-3 { margin-top: var(--adg-spacing-m) !important; }
.adg-mb-3 { margin-bottom: var(--adg-spacing-m) !important; }
.adg-mt-4 { margin-top: var(--adg-spacing-l) !important; }
.adg-mb-4 { margin-bottom: var(--adg-spacing-l) !important; }

.adg-p-0 { padding: 0 !important; }
.adg-pt-1 { padding-top: var(--adg-spacing-xs) !important; }
.adg-pb-1 { padding-bottom: var(--adg-spacing-xs) !important; }
.adg-pt-2 { padding-top: var(--adg-spacing-s) !important; }
.adg-pb-2 { padding-bottom: var(--adg-spacing-s) !important; }
.adg-pt-3 { padding-top: var(--adg-spacing-m) !important; }
.adg-pb-3 { padding-bottom: var(--adg-spacing-m) !important; }
.adg-pt-4 { padding-top: var(--adg-spacing-l) !important; }
.adg-pb-4 { padding-bottom: var(--adg-spacing-l) !important; }

.adg-d-none { display: none !important; }
.adg-d-block { display: block !important; }
.adg-d-flex { display: flex !important; }
.adg-d-inline-block { display: inline-block !important; }

.adg-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================================
   DARK THEME OVERRIDES FOR REGULAR WEBSITE (NOT TWA)
   ============================================================================ */

/* Dark theme variables for non-TWA mode */
body:not(.twa-mode) {
    /* Override colors for dark theme */
    --adg-color-N0: #121212;    /* Dark background */
    --adg-color-N20: #1e1e1e;   /* Darker background */
    --adg-color-N30: #2a2a2a;   /* Medium dark (borders, UI elements) */
    --adg-color-N40: #333333;   /* Lighter dark (borders) */
    --adg-color-N50: #404040;   /* Gray (UI elements) */
    --adg-color-N90: #9e9e9e;   /* Light gray (secondary text) */
    --adg-color-N500: #e0e0e0;  /* Light gray (primary text) */
    --adg-color-N800: #ffffff;  /* White (headings) */

    /* Enhanced colors for dark theme */
    --adg-color-B400: #64b5f6;  /* Lighter blue for better contrast */
    --adg-color-B500: #42a5f5;  /* Even lighter blue for hover */
    
    /* Shadows for dark theme */
    --adg-shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 0, 0, 0.5);
    --adg-shadow-s: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 4px rgba(0, 0, 0, 0.5);
    
    /* Enhanced border radius for modern look */
    --adg-border-radius: 8px;
}

/* Form elements for dark theme */
body:not(.twa-mode) .adg-form-input,
body:not(.twa-mode) .adg-form-textarea {
    background-color: #2a2a2a;
    border-color: #444444;
    color: #e0e0e0;
}

body:not(.twa-mode) .adg-form-input:focus,
body:not(.twa-mode) .adg-form-textarea:focus {
    border-color: var(--adg-color-B400);
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.3);
}

body:not(.twa-mode) .adg-form-input::placeholder,
body:not(.twa-mode) .adg-form-textarea::placeholder {
    color: #888888;
}

body:not(.twa-mode) .adg-form-label {
    color: #b0b8c5;
}

body:not(.twa-mode) .adg-form-helper-text {
    color: #9e9e9e;
}

body:not(.twa-mode) .adg-form-error-text {
    color: #ff7875;
}

/* Button styles for dark theme */
body:not(.twa-mode) .adg-button--default {
    background-color: #2a2a2a;
    border-color: #444444;
    color: #e0e0e0;
}

body:not(.twa-mode) .adg-button--default:hover:not(:disabled):not(.is-disabled) {
    background-color: #333333;
    border-color: #555555;
}

body:not(.twa-mode) .adg-button--subtle {
    color: #b0b8c5;
}

body:not(.twa-mode) .adg-button--subtle:hover:not(:disabled):not(.is-disabled) {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
}

/* Card styles for dark theme */
body:not(.twa-mode) .adg-card {
    background-color: #1e1e1e;
    border: 1px solid #333333;
    box-shadow: var(--adg-shadow-s);
}

body:not(.twa-mode) .adg-card-header {
    border-bottom-color: #333333;
}

body:not(.twa-mode) .adg-card-footer {
    border-top-color: #333333;
}

/* Navigation styles for dark theme */
body:not(.twa-mode) .adg-nav a {
    color: #e0e0e0;
}

body:not(.twa-mode) .adg-nav a:hover,
body:not(.twa-mode) .adg-nav a.is-active {
    color: var(--adg-color-B400);
    background-color: rgba(100, 181, 246, 0.1);
}

/* Container styles for centered layout */
body:not(.twa-mode) .adg-container {
    background-color: var(--adg-color-N20);
    border: 1px solid var(--adg-color-N40);
    box-shadow: var(--adg-shadow-s);
}

/* Modal and overlay styles for dark theme */
body:not(.twa-mode) .adg-modal-dialog-blanket {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 5000;
    display: none;
}

body:not(.twa-mode) .adg-modal-dialog-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5001;
    padding: 20px;
    box-sizing: border-box;
    display: none;
}

body:not(.twa-mode) .adg-modal-dialog {
    background-color: #1e1e1e;
    border: 1px solid #333333;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

body:not(.twa-mode) .adg-modal-dialog__header {
    border-bottom-color: #333333;
    padding: 24px 24px 20px;
}

body:not(.twa-mode) .adg-modal-dialog__header h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

body:not(.twa-mode) .adg-modal-dialog__content {
    padding: 0 24px 20px;
    overflow-y: auto;
    color: #e0e0e0;
}

body:not(.twa-mode) .adg-modal-dialog__footer {
    border-top-color: #333333;
    padding: 20px 24px 24px;
    gap: 12px;
}

body:not(.twa-mode) .adg-modal-dialog__close-button {
    color: #9e9e9e;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

body:not(.twa-mode) .adg-modal-dialog__close-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ========== DATETIME-LOCAL КАЛЕНДАРИ (ГЛОБАЛЬНЫЕ СТИЛИ) ========== */

/* Основные стили для календарей в TWA режиме */
body.twa-mode input[type="datetime-local"] {
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
    background-color: #333333;
    border-color: #454545;
    color: #e0e0e0;
}

body.twa-mode input[type="datetime-local"]:focus {
    border-color: var(--adg-color-B400);
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.3);
}

/* Иконка календаря в TWA режиме */
body.twa-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.4) contrast(100%);
    cursor: pointer;
    opacity: 0.8;
    background-image: none;
    background-color: transparent;
    padding: 4px;
    margin-right: 4px;
}

body.twa-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Основные стили для календарей в обычном режиме сайта */
body:not(.twa-mode) input[type="datetime-local"] {
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
    background-color: #2a2a2a;
    border-color: #444444;
    color: #e0e0e0;
}

body:not(.twa-mode) input[type="datetime-local"]:focus {
    border-color: var(--adg-color-B400);
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.3);
}

/* Иконка календаря в обычном режиме */
body:not(.twa-mode) input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2) contrast(120%);
    cursor: pointer;
    opacity: 0.9;
    background-image: none;
    background-color: transparent;
    padding: 4px;
    margin-right: 4px;
    transition: all 0.2s ease;
}

body:not(.twa-mode) input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: rgba(100, 181, 246, 0.1);
    border-radius: 4px;
    transform: scale(1.1);
}

/* Дополнительные стили для браузеров, поддерживающих кастомизацию календаря */
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit,
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit-text,
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit-month-field,
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit-day-field,
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit-year-field,
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
body.twa-mode input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
    color: #e0e0e0;
}

body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit,
body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit-text,
body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit-month-field,
body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit-day-field,
body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit-year-field,
body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
body:not(.twa-mode) input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
    color: #e0e0e0;
}

/* Дополнительные стили для popup календаря в темной теме */
/* Эти стили применяются к самому popup'у календаря */
body.twa-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    /* Дополнительные улучшения для иконки календаря */
    width: 16px;
    height: 16px;
}

body:not(.twa-mode) input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    width: 16px;
    height: 16px;
}

/* Попытка стилизации самого календарного popup */
/* К сожалению, браузеры не дают полный контроль над стилизацией нативного календаря */
/* Но мы можем попытаться повлиять на некоторые свойства */
@media (prefers-color-scheme: dark) {
    input[type="datetime-local"] {
        color-scheme: dark;
    }
}

/* ========== КОНЕЦ DATETIME-LOCAL СТИЛЕЙ ========== */