/*
  Xllentech English Islamic Calendar - Public Styles
  Organized for readability and easier editing.
  Now uses CSS variables for color management.
*/

:root {
  /* Light mode color variables */
  --xc-bg: #fff;
  --xc-widget-bg: transparent;
  --xc-widget-fg: #000;
  --xc-table-bg: transparent;
  --xc-table-border: #e6e6e7;
  --xc-header-bg: #5b5c5f;
  --xc-header-fg: #fff;
  --xc-subheader-bg: #cdcecf;
  --xc-subheader-fg: #666;
  --xc-english-month: #fff;
  --xc-english-current: #676767;
  --xc-english-next: #999;
  --xc-english-prev: #999;
  --xc-islamic-1: #009d00;
  --xc-islamic-2: #090;
  --xc-islamic-3: #090;
  --xc-tooltip-border: #000;
  --xc-today-fg: #1982d1;
  --xc-english-default: #5b5c5f;
  --xc-islamic-default: #009d00;
  --xc-english-blue: #1982d1;
  --xc-islamic-blue: #009d00;
  --xc-english-green: #005900;
  --xc-islamic-green: #009d00;
  --xc-english-red: #812a23;
  --xc-islamic-red: #009d00;
  --xc-first-default: silver;
  --xc-first-red: #fbb3ae;
  --xc-first-blue: #a6d4fa;
  --xc-first-green: #93cf95;
  --xc-admin-input: #777;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode color variables */
    --xc-bg: #1e1e1e;
    --xc-widget-bg: #1e1e1e;
    --xc-widget-fg: #e0e0e0;
    --xc-table-bg: #2d2d2d;
    --xc-table-border: #404040;
    --xc-header-bg: #404040;
    --xc-header-fg: #e0e0e0;
    --xc-subheader-bg: #353535;
    --xc-subheader-fg: #b0b0b0;
    --xc-english-month: #e0e0e0;
    --xc-english-current: #e0e0e0;
    --xc-english-next: #b0b0b0;
    --xc-english-prev: #b0b0b0;
    --xc-islamic-1: #00ff00;
    --xc-islamic-2: #00dd00;
    --xc-islamic-3: #00dd00;
    --xc-tooltip-border: #888;
    --xc-today-fg: #4db8ff;
    --xc-english-default: #b0b0b0;
    --xc-islamic-default: #00ff00;
    --xc-english-blue: #4db8ff;
    --xc-islamic-blue: #00ff00;
    --xc-english-green: #66ff66;
    --xc-islamic-green: #00ff00;
    --xc-english-red: #ff6666;
    --xc-islamic-red: #00ff00;
    --xc-first-default: #606060;
    --xc-first-red: #8b4545;
    --xc-first-blue: #4a6b8b;
    --xc-first-green: #4a8b4a;
    --xc-admin-input: #b0b0b0;
  }
}

/* Month headers */
.xllentech-english-month,
.xllentech-english-month-LTR,
.xllentech-english-month-RTL,
.xllentech-islamic-month,
.xllentech-islamic-month-LTR,
.xllentech-islamic-month-RTL {
  color: var(--xc-english-month);
	display: block;
	width: 100%;
	font-size: 13px;
	font-weight: 700;
}

/* Widget container */
.xllentech-calendar-widget {
	width: 100%;
	font-size: 11px;
	margin: 0 auto;
	padding: 5px 0;
  background-color: var(--xc-widget-bg);
  color: var(--xc-widget-fg);
}

/* Table base styles */
.xllentech-calendar-widget table {
	border-spacing: 0;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	width: 100%;
    background-color: var(--xc-table-bg);
	table-layout: fixed;
}

.xllentech-calendar-widget table td,
.xllentech-calendar-widget table th {
	padding: 0;
	text-align: center;
	vertical-align: top;
	line-height: 20px;
    background-color: var(--xc-table-bg);
    color: var(--xc-widget-fg);
}

.xllentech-calendar-widget tr.xllentech-main-nav {
	font-size: 13px;
}

.xllentech-daybox {
	padding: 0 10%;
}

/* Alignment helpers */
.xllentech-english-month,
.xllentech-english-month-LTR { text-align: right; }

.xllentech-english-month-RTL,
.xllentech-islamic-month,
.xllentech-islamic-month-LTR { text-align: left; }

.xllentech-english-current,
.xllentech-english-current-LTR,
.xllentech-english-next,
.xllentech-english-next-LTR,
.xllentech-english-previous,
.xllentech-english-previous-LTR,
.xllentech-islamic-month-RTL { text-align: right; }

.xllentech-english-current,
.xllentech-english-current-LTR,
.xllentech-english-current-RTL,
.xllentech-english-next,
.xllentech-english-next-LTR,
.xllentech-english-next-RTL,
.xllentech-english-previous,
.xllentech-english-previous-LTR,
.xllentech-english-previous-RTL {
	display: block;
	width: 100%;
}

.xllentech-english-current-RTL,
.xllentech-english-next-RTL,
.xllentech-english-previous-RTL,
.xllentech-islamic-1,
.xllentech-islamic-1-LTR,
.xllentech-islamic-2,
.xllentech-islamic-2-LTR,
.xllentech-islamic-3,
.xllentech-islamic-3-LTR { text-align: left; }

/* Color semantics */
.xllentech-english-next,
.xllentech-english-next-LTR,
.xllentech-english-next-RTL { color: #999; }
.xllentech-english-next,
.xllentech-english-next-LTR,
.xllentech-english-next-RTL { color: var(--xc-english-next); }

.xllentech-english-current,
.xllentech-english-current-LTR,
.xllentech-english-current-RTL {
    color: var(--xc-english-current);
	font-weight: 700;
}

.xllentech-english-previous,
.xllentech-english-previous-LTR,
.xllentech-english-previous-RTL { color: #999; }
.xllentech-english-previous,
.xllentech-english-previous-LTR,
.xllentech-english-previous-RTL { color: var(--xc-english-prev); }

.xllentech-islamic-1,
.xllentech-islamic-1-LTR,
.xllentech-islamic-1-RTL {
    color: var(--xc-islamic-1);
	display: block;
	font-weight: 700;
	width: 100%;
}

.xllentech-islamic-2,
.xllentech-islamic-2-LTR,
.xllentech-islamic-2-RTL,
.xllentech-islamic-3,
.xllentech-islamic-3-LTR,
.xllentech-islamic-3-RTL {
  color: var(--xc-islamic-2);
	width: 100%;
	display: inline-block;
}

.xllentech-islamic-1-RTL,
.xllentech-islamic-2-RTL,
.xllentech-islamic-3-RTL { text-align: right; }

.xllentech-month-names { padding-left: 10px; padding-right: 10px; }

/* Selects */
.xllentech-calendar-widget select.xllentech-main-nav {
	width: 100%;
	height: 40px;
	font-weight: 700;
	opacity: .5;
	border: 0;
	padding: 0;
}

.xllentech-calendar-widget select { margin: 0; }

/* Spacing helpers */
.xllentech-spacing { padding: 20%; display: block; }

/* Today widget */
.xllentech-islamic-today { font-weight: 700; font-size: 17px; }

span.xllentech-today-english-date-LTR,
span.xllentech-today-islamic-date-RTL {
	display: block;
	text-align: right;
	width: 100%;
}

span.xllentech-today-islamic-date-LTR,
span.xllentech-today-english-date-RTL {
	display: block;
	text-align: left;
	width: 100%;
}

.xllentech-today-spacing { padding: 1%; display: block; }

/* Tooltip inside day boxes */
.xllentech-daybox .tooltip {
	position: relative;
	display: inline-block;
  border-bottom: 1px dotted var(--xc-tooltip-border);
}

/* Theme: Default */
.xllentech-calendar-widget table.xc_table_Default td,
.xllentech-calendar-widget table.xc_table_Default th { border: 1px solid #e6e6e7; }
.xllentech-calendar-widget table.xc_table_Default td,
.xllentech-calendar-widget table.xc_table_Default th { border: 1px solid var(--xc-table-border); }

.xllentech-calendar-widget table.xc_table_Default tr.xllentech_header th { background: #5b5c5f; }
.xllentech-calendar-widget table.xc_table_Default tr.xllentech_header th { background: var(--xc-header-bg); color: var(--xc-header-fg); }

.xllentech-calendar-widget table.xc_table_Default tr.xllentech_subheader th {
  background: var(--xc-subheader-bg);
  color: var(--xc-subheader-fg);
  text-align: center;
}

span.xllentech_english_Default { color: #5b5c5f; }
span.xllentech_english_Default { color: var(--xc-english-default); }
span.xllentech_islamic_Default { color: #009d00; }
span.xllentech_islamic_Default { color: var(--xc-islamic-default); }
.xllentech-islamic-today_Default { color: #1982d1; }
.xllentech-islamic-today_Default { color: var(--xc-today-fg); }

/* Theme: Blue */
.xllentech-calendar-widget table.xc_table_Blue td,
.xllentech-calendar-widget table.xc_table_Blue th { border: 1px solid #d9e1ec; }
.xllentech-calendar-widget table.xc_table_Blue td,
.xllentech-calendar-widget table.xc_table_Blue th { border: 1px solid var(--xc-table-border); }

.xllentech-calendar-widget table.xc_table_Blue tr.xllentech_header th { background: #354b68; }
.xllentech-calendar-widget table.xc_table_Blue tr.xllentech_header th { background: var(--xc-header-bg); color: var(--xc-header-fg); }

.xllentech-calendar-widget table.xc_table_Blue tr.xllentech_subheader th {
  background: var(--xc-subheader-bg);
  color: var(--xc-subheader-fg);
  text-align: center;
}

span.xllentech_english_Blue { color: #1982d1; }
span.xllentech_english_Blue { color: var(--xc-english-blue); }
span.xllentech_islamic_Blue { color: #009d00; }
span.xllentech_islamic_Blue { color: var(--xc-islamic-blue); }
.xllentech-islamic-today_Blue { color: #1982d1; }
.xllentech-islamic-today_Blue { color: var(--xc-today-fg); }

/* Theme: Green */
.xllentech-calendar-widget table.xc_table_Green td,
.xllentech-calendar-widget table.xc_table_Green th { border: 1px solid #b3ffb3; }
.xllentech-calendar-widget table.xc_table_Green td,
.xllentech-calendar-widget table.xc_table_Green th { border: 1px solid var(--xc-table-border); }

.xllentech-calendar-widget table.xc_table_Green tr.xllentech_header th { background: #005900; }
.xllentech-calendar-widget table.xc_table_Green tr.xllentech_header th { background: var(--xc-header-bg); color: var(--xc-header-fg); }

.xllentech-calendar-widget table.xc_table_Green tr.xllentech_subheader th {
  background: var(--xc-subheader-bg);
  color: var(--xc-subheader-fg);
  text-align: center;
}

span.xllentech_english_Green { color: #005900; }
span.xllentech_english_Green { color: var(--xc-english-green); }
span.xllentech_islamic_Green { color: #009d00; }
span.xllentech_islamic_Green { color: var(--xc-islamic-green); }
.xllentech-islamic-today_Green { color: #1982d1; }
.xllentech-islamic-today_Green { color: var(--xc-today-fg); }

/* Theme: Red */
.xllentech-calendar-widget table.xc_table_Red td,
.xllentech-calendar-widget table.xc_table_Red th { border: 1px solid #f3d6d4; }
.xllentech-calendar-widget table.xc_table_Red td,
.xllentech-calendar-widget table.xc_table_Red th { border: 1px solid var(--xc-table-border); }

.xllentech-calendar-widget table.xc_table_Red tr.xllentech_header th { background: #812a23; }
.xllentech-calendar-widget table.xc_table_Red tr.xllentech_header th { background: var(--xc-header-bg); color: var(--xc-header-fg); }

.xllentech-calendar-widget table.xc_table_Red tr.xllentech_subheader th {
  background: var(--xc-subheader-bg);
  color: var(--xc-subheader-fg);
  text-align: center;
}

span.xllentech_english_Red { color: #812a23; }
span.xllentech_english_Red { color: var(--xc-english-red); }
span.xllentech_islamic_Red { color: #009d00; }
span.xllentech_islamic_Red { color: var(--xc-islamic-red); }
.xllentech-islamic-today_Red { color: #1982d1; }
.xllentech-islamic-today_Red { color: var(--xc-today-fg); }

/* First-day marker variations */
.xllentech_islamic_first_Default { background: silver; border-radius: 50%; }
.xllentech_islamic_first_Default { background: var(--xc-first-default); border-radius: 50%; }
.xllentech_islamic_first_Red { background: #fbb3ae; border-radius: 50%; }
.xllentech_islamic_first_Red { background: var(--xc-first-red); border-radius: 50%; }
.xllentech_islamic_first_Blue { background: #a6d4fa; border-radius: 50%; }
.xllentech_islamic_first_Blue { background: var(--xc-first-blue); border-radius: 50%; }
.xllentech_islamic_first_Green { background: #93cf95; border-radius: 50%; }
.xllentech_islamic_first_Green { background: var(--xc-first-green); border-radius: 50%; }

/* Admin: Islamic days update form */
.xllentech-update-islamic-days input[type="number"] { color: #777 !important; }
.xllentech-update-islamic-days input[type="number"] { color: var(--xc-admin-input) !important; }
.xllentech-update-islamic-days table td { padding: 10px; }
.xllentech-update-islamic-days table td { padding: 10px; }
.xllentech-update-islamic-days label { font-weight: bold; }
.xllentech-update-islamic-days label { font-weight: bold; }

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  /* Widget container - ensure background works on dark */
  .xllentech-calendar-widget {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }

  /* Table cells - add background and adjust borders */
  .xllentech-calendar-widget table td,
  .xllentech-calendar-widget table th {
    background-color: #2d2d2d;
    color: #e0e0e0;
  }

  /* Day box backgrounds */
  .xllentech-daybox {
    background-color: #2d2d2d;
  }

  /* English dates - lighter grays for visibility */
  .xllentech-english-next,
  .xllentech-english-next-LTR,
  .xllentech-english-next-RTL { color: #b0b0b0; }

  .xllentech-english-current,
  .xllentech-english-current-LTR,
  .xllentech-english-current-RTL {
    color: #e0e0e0;
    font-weight: 700;
  }

  .xllentech-english-previous,
  .xllentech-english-previous-LTR,
  .xllentech-english-previous-RTL { color: #b0b0b0; }

  /* Islamic dates - brighter greens for dark background */
  .xllentech-islamic-1,
  .xllentech-islamic-1-LTR,
  .xllentech-islamic-1-RTL {
    color: #00ff00;
  }

  .xllentech-islamic-2,
  .xllentech-islamic-2-LTR,
  .xllentech-islamic-2-RTL,
  .xllentech-islamic-3,
  .xllentech-islamic-3-LTR,
  .xllentech-islamic-3-RTL {
    color: #00dd00;
  }

  /* Tooltip in dark mode */
  .xllentech-daybox .tooltip {
    border-bottom: 1px dotted #888;
  }

  /* Theme: Default - Dark Mode */
  .xllentech-calendar-widget table.xc_table_Default td,
  .xllentech-calendar-widget table.xc_table_Default th { 
    border: 1px solid #404040;
    background-color: #2d2d2d;
  }

  .xllentech-calendar-widget table.xc_table_Default tr.xllentech_header th { 
    background: #404040;
    color: #e0e0e0;
  }

  .xllentech-calendar-widget table.xc_table_Default tr.xllentech_subheader th {
    background: #353535;
    color: #b0b0b0;
  }

  span.xllentech_english_Default { color: #b0b0b0; }
  span.xllentech_islamic_Default { color: #00ff00; }
  .xllentech-islamic-today_Default { color: #4db8ff; }

  /* Theme: Blue - Dark Mode */
  .xllentech-calendar-widget table.xc_table_Blue td,
  .xllentech-calendar-widget table.xc_table_Blue th { 
    border: 1px solid #2d4a6b;
    background-color: #1a2a3a;
  }

  .xllentech-calendar-widget table.xc_table_Blue tr.xllentech_header th { 
    background: #2d4a6b;
    color: #e0e0e0;
  }

  .xllentech-calendar-widget table.xc_table_Blue tr.xllentech_subheader th {
    background: #1f3a52;
    color: #b0b0b0;
  }

  span.xllentech_english_Blue { color: #4db8ff; }
  span.xllentech_islamic_Blue { color: #00ff00; }
  .xllentech-islamic-today_Blue { color: #4db8ff; }

  /* Theme: Green - Dark Mode */
  .xllentech-calendar-widget table.xc_table_Green td,
  .xllentech-calendar-widget table.xc_table_Green th { 
    border: 1px solid #2d4a2d;
    background-color: #1a2a1a;
  }

  .xllentech-calendar-widget table.xc_table_Green tr.xllentech_header th { 
    background: #2d4a2d;
    color: #e0e0e0;
  }

  .xllentech-calendar-widget table.xc_table_Green tr.xllentech_subheader th {
    background: #1f3a1f;
    color: #b0b0b0;
  }

  span.xllentech_english_Green { color: #66ff66; }
  span.xllentech_islamic_Green { color: #00ff00; }
  .xllentech-islamic-today_Green { color: #4db8ff; }

  /* Theme: Red - Dark Mode */
  .xllentech-calendar-widget table.xc_table_Red td,
  .xllentech-calendar-widget table.xc_table_Red th { 
    border: 1px solid #4a2d2d;
    background-color: #2a1a1a;
  }

  .xllentech-calendar-widget table.xc_table_Red tr.xllentech_header th { 
    background: #4a2d2d;
    color: #e0e0e0;
  }

  .xllentech-calendar-widget table.xc_table_Red tr.xllentech_subheader th {
    background: #3a1f1f;
    color: #b0b0b0;
  }

  span.xllentech_english_Red { color: #ff6666; }
  span.xllentech_islamic_Red { color: #00ff00; }
  .xllentech-islamic-today_Red { color: #4db8ff; }

  /* First-day marker variations - Dark Mode */
  .xllentech_islamic_first_Default { background: #606060; }
  .xllentech_islamic_first_Red { background: #8b4545; }
  .xllentech_islamic_first_Blue { background: #4a6b8b; }
  .xllentech_islamic_first_Green { background: #4a8b4a; }

  /* Admin form in dark mode */
  .xllentech-update-islamic-days input[type="number"] { 
    color: #b0b0b0 !important;
    background-color: #2d2d2d;
    border-color: #404040;
  }

  .xllentech-update-islamic-days table td {
    background-color: #2d2d2d;
    color: #e0e0e0;
  }

  .xllentech-update-islamic-days label { 
    color: #e0e0e0;
  }
}