@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* 🌟 Primary Theme Colors */
    --colMain: #5A1D41; /* Accent Purple */
    --colMainDark: #4A1835; /* Darker Shade for Hover/Buttons */
    --colMainLight: #7B3462; /* Lighter Accent */

    /* 🎨 Background & Surface */
    --colBackground: #F8F8F8; /* Light Background */
    --colSurface: #FFFFFF; /* White Card Background */
    --colBorder: #D1D1D1; /* Soft Border Color */

    /* 🖋️ Text Colors */
    --colText: #333333; /* Primary Text */
    --colTextLight: #666666; /* Secondary Text */
    --colTextOnMain: #FFFFFF; /* Text on Main Color */

    /* 🔘 UI Elements */
    --colButton: var(--colMain); /* Buttons Default */
    --colButtonHover: var(--colMainDark); /* Hover */
    --colInputBg: #FFFFFF; /* Input Background */
    --colInputBorder: #C4C4C4; /* Input Border */

    /* ⚠️ Alerts & Status */
    --colSuccess: #28A745; /* Green Success */
    --colWarning: #FFC107; /* Yellow Warning */
    --colError: #DC3545; /* Red Error */
    --colInfo: #17A2B8; /* Blue Info */

    /* 📌 Navigation Colors */
    --colNavBackground: #eaeaea;  /* Soft Light Gray */
    --colNavText: #333333;        /* Dark Gray Text for Readability */
    --colNavTextHover: #f4f4f4;   /* Slightly Darker Gray for Hover */
    --colNavActive: #ffffff;      /* Medium Gray for Active Page */
    --colNavBorder: #D1D1D1;      /* Light Border for Separation */


    /* FONTS */
    --fontInter: "Inter", serif;
    --fontMontserrat: "Montserrat", serif;
    --fontPoppins: "Poppins", serif;

    /* SIZES */
    --sizeNavWidth: 263px;
    --sizeNotifBarHeight: 5px;
    --sizeBodyPaddingX: 40px;
    --sizeBodyPaddingY: 40px;
}

/* Brand-true Dark Mode — “same, but darker” */
.dark:root {
  /* 🔮 Accent (plum, brighter for contrast on dark) */
  --colMain:       #9A457D;  /* plum */
  --colMainDark:   #7B315F;  /* hover/active */
  --colMainLight:  #C779A9;  /* subtle highlights */

  /* 🧱 Backgrounds & Surfaces (neutral charcoal, not blue) */
  --colBackground: #121214;  /* page bg */
  --colSurface:    #1A1B1E;  /* cards/panels */
  --colBorder:     #2A2B31;  /* dividers */

  /* ✍️ Text */
  --colText:       #ECECEC;  /* primary */
  --colTextLight:  #A9ABB1;  /* secondary */
  --colTextOnMain: #FFFFFF;  /* text on accent */

  /* 🔘 UI */
  --colButton:       var(--colMain);
  --colButtonHover:  var(--colMainDark);
  --colInputBg:      #15161A;
  --colInputBorder:  #2B2D33;

  /* ⚠️ Status (softened a bit for dark) */
  --colSuccess: #2EA75A;
  --colWarning: #E0B252;
  --colError:   #E25564;
  --colInfo:    #58B9D9;

  /* 📌 Navigation */
  --colNavBackground: #141518;
  --colNavText:       #E6E6EA;
  --colNavTextHover:  #FFFFFF;
  --colNavActive:     #1E1F23;
  --colNavBorder:     #2A2B31;
}

/* nice focus ring on dark */
.dark input:focus {
  border-color: var(--colMain);
  outline: none;
}

/* dark scrollbars to match */
.dark ::-webkit-scrollbar-track { background: var(--colSurface); }
.dark ::-webkit-scrollbar-thumb { background: var(--colMain); }
.dark ::-webkit-scrollbar-thumb:hover { background: var(--colMainDark); }

html, body {
    overscroll-behavior: contain;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    font-family: var(--fontInter);
}

nav::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--colSurface);
}

::-webkit-scrollbar-thumb {
    background: var(--colMain);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--colMainDark);
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

button, .btn {
    background: var(--colButton);
    color: var(--colTextOnMain);
    padding: 12px;
    font-size: 16px;
    font-family: var(--fontMontserrat);
    font-weight: 500;
    border: 1px solid var(--colButton);
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 15px;
}

button:hover {
    filter: brightness(0.9);
}

button:disabled {
    background-color: #f0f0f0;  /* light gray / near white */
    color: #999;                /* slightly faded text */
    cursor: not-allowed;
    opacity: 1;                 /* ensure full visibility */
    border: 1px solid #ccc;     /* optional subtle border */
}

button:disabled:hover {
    filter: brightness(1);
}

.btnGoneAway, .btnEdit, .btnDelete, .btnSuccess, .btnError {
    background-color: #ff6b6b;
    color: white;
    border: none;
    padding: 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px; /* Rounded corners */
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    display: inline-block;
    align-items: center;
    margin: 0;
}

.btnEdit {
    background-color: #6ba1ff;
}

.btnSuccess {
    background-color: #52c745;
}

.btnError {
    background-color: #c74545;
}

.btnDelete {
    background-color: #080808;
}

.btnGoneAway.invis {
    background-color: transparent; 
    cursor: default;
    color: transparent;
}

#shiftControls button {
    margin-top: 0px;
}

label {
    text-align: left;
    font-weight: 600;
    color: var(--colText);
    margin: 8px 0 5px;
    font-family: var(--fontInter);
}

input, select {
    width: 100%;
    padding: 10px;
    height: 42px;
    font-size: 16px;
    background: var(--colInputBg);
    border: 1px solid var(--colInputBorder);
    border-radius: 5px;
    font-family: var(--fontInter);
    color: var(--colText);
    transition: border 0.2s;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

input {
    line-height: 20px;
}

select {
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23A6A5B0' height='14' viewBox='0 0 20 20' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M10 12l-6-6h12z'/></svg>");
    background-repeat: no-repeat;
    background-color: var(--colInputBg);
    background-position: right 10px center;
    background-size: 14px;
}

input:disabled,
select:disabled {
    background: var(--colBackground);
    color: var(--colTextLight);
    cursor: not-allowed;
    opacity: 1; /* keeps text fully visible */
}

input:focus {
    border-color: var(--colMain);
    outline: none;
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
    min-height: auto;
    line-height: normal;
    height: auto;
    appearance: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: white;
    gap: 4px;
    min-height: 38px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tag-list li {
    background-color: var(--colNavBackground);
    border: 1px solid var(--colBorder);
    border-radius: 3px;
    padding: 3px 6px;
    margin-right: 4px;
    font-size: 0.9em;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.tag-list li:last-child {
    margin-right: 0;
}

.tag-list li .remove-tag {
    margin-left: 6px;
    color: red;
    cursor: pointer;
    font-weight: bold;
}

h2.page-title {
    color: var(--colMain);
    font-weight: 800;
    font-size: 26px;
    margin-bottom: 22px;
}

h3.sub-title {
    font-weight: 700;
    font-size: 17px;
    margin-top: 24px;
    font-family: var(--fontMontserrat);

    text-transform: uppercase;
}

.password-toggle {
    cursor: help;
}

.w100 {
    width: 100% !important;
}

.h100 {
    height: 100% !important;
}

.col-success {
    color: var(--colSuccess) !important;
}

.col-error {
    color: var(--colError) !important;
}

.col-warn {
    color: var(--colWarning) !important;
}

.col-info {
    color: var(--colInfo) !important;
}

.col-on-main {
    color: var(--colTextOnMain) !important;
}

.col-muted {
    color: var(--colTextLight) !important;
}

.bg-success {
    background-color: var(--colSuccess) !important;
}

.bg-error {
    background-color: var(--colError) !important;
}

.bg-warn {
    background-color: var(--colWarning) !important;
}

.bg-info {
    background-color: var(--colInfo) !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.text-center {
    text-align: center;
}

.ql-container.ql-snow {
    border: 1px solid var(--colInputBorder) !important;
    border-top: 0 !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.ql-toolbar.ql-snow {
    border: 1px solid var(--colInputBorder) !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

span.required {
    color: rgb(208, 58, 58);
    font-weight: 600;
}

/* KEYFRAMES */
@keyframes movingStripes {
    from { background-position: 0 0; }
    to { background-position: 28px 0; } /* Moves stripes to the left */
}

@keyframes hourglass-tilt {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

@keyframes flashing-text {
    0% { text-shadow: none; }
    50% { text-shadow: 0 0 6px currentColor; } /* Peak brightness */
    100% { text-shadow: none; }
}

@keyframes bell-ring {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(10deg); }
    30%  { transform: rotate(-10deg); }
    45%  { transform: rotate(8deg); }
    60%  { transform: rotate(-8deg); }
    75%  { transform: rotate(5deg); }
    85%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* JQUERY */
.ui-autocomplete {
    font-size: 16px; /* or 18px, 20px, etc. */
    line-height: 1.6;
    border-radius: 0;
    border: 1px solid var(--colBorder);
    box-shadow: none;
    max-height: 420px;       /* whatever you like */
    overflow-y: auto;
    overflow-x: hidden;       /* no horizontal bar */
    padding-right: 6px;
}

.ui-autocomplete .ui-menu-item {
    padding: 8px 12px; /* make it more spacious */
}