/* ------------------------------------------------------------------
   Clifton Jamat Khana Calendar - the few bits the Ace theme does not cover.

   Everything else (chrome, panels, tables, buttons, alerts) comes from the
   theme's own stylesheets, exactly as the PHP app had it. Redefining .panel
   or .btn here would quietly override the theme and is what made the forms
   look wrong.
   ------------------------------------------------------------------ */

/* the fixed navbar overlaps the content unless it is allowed for */
body { padding-top: 45px; }

/* the old login page, which has no theme chrome of its own.

   Open Sans at 13px/1.5 on #393939 is what ace.min.css sets for every other
   page, so the login page states it explicitly to match. Form controls do not
   inherit the page font on their own, hence the second rule. */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: #2b3138; padding-top: 0;
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #393939;
}
.login-box input, .login-box button, .login-box label, .login-box h1 {
    font-family: inherit;
}
.login-box {
    width: 330px; background: #fff; border-radius: 5px; padding: 28px;
    box-shadow: 0 10px 34px rgba(0,0,0,.3);
}
.login-box h1 { font-size: 18px; margin: 0; font-weight: 400; color: #2b3138; }
.login-sub { color: #777; margin: 2px 0 18px; font-size: 13px; }
.login-box label { display: block; font-size: 12px; color: #777; margin-bottom: 4px; }
.login-box input {
    width: 100%; padding: 8px 10px; border: 1px solid #b5bdc5;
    border-radius: 3px; margin-bottom: 14px; font-size: 14px;
    background: #fff; color: #393939;
}
.login-box input:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51,122,183,.18);
    outline: 0;
}
.login-box .alert { margin-bottom: 14px; }

/* form fields, sized so they do not stretch across a wide screen */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; margin-bottom: 4px; font-weight: 600; }
.field input[type=text], .field input[type=email], .field input[type=date],
.field input[type=password], .field select, .field textarea {
    width: 100%; max-width: 420px; padding: 6px 9px;
    border: 1px solid #ccc; border-radius: 3px; font-size: 14px;
}
.field .hint, .hint { color: #777; font-size: 12px; margin-top: 3px; }

/* ------------------------------------------------------------------
   The booking form's fields

   The Ace theme draws inputs as 1px #d5d5d5 on white. That is roughly 1.4:1
   against the page, well under the 3:1 that a form boundary needs to be
   reliably visible, so on a long form the boxes read as faint gaps rather
   than fields. A darker edge and a slightly recessed fill give each one a
   definite shape, and the focus ring says which one has the caret.

   Scoped to .form-horizontal, which only Bookings/Edit.cshtml uses, so the
   theme's own styling everywhere else is left alone.
   ------------------------------------------------------------------ */

.form-horizontal input[type=text],
.form-horizontal input[type=email],
.form-horizontal input[type=tel],
.form-horizontal input[type=url],
.form-horizontal input[type=number],
.form-horizontal input[type=date],
.form-horizontal input[type=time],
.form-horizontal input[type=password],
.form-horizontal select,
.form-horizontal textarea {
    border: 1px solid #7b8794;
    border-radius: 3px;
    background-color: #fcfdfe;
    color: #393939;
    padding: 6px 9px;
    box-shadow: inset 0 1px 2px rgba(27,36,46,.07);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-horizontal textarea { min-height: 70px; }

/* Focus has to beat the resting border, not just tint it. */
.form-horizontal input[type=text]:focus,
.form-horizontal input[type=email]:focus,
.form-horizontal input[type=tel]:focus,
.form-horizontal input[type=url]:focus,
.form-horizontal input[type=number]:focus,
.form-horizontal input[type=date]:focus,
.form-horizontal input[type=time]:focus,
.form-horizontal input[type=password]:focus,
.form-horizontal select:focus,
.form-horizontal textarea:focus {
    border-color: #337ab7;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(51,122,183,.18);
    outline: 0;
}

/* A disabled field should look unavailable rather than merely empty. */
.form-horizontal input:disabled,
.form-horizontal select:disabled,
.form-horizontal textarea:disabled {
    background-color: #eef0f2;
    border-color: #c2c9d0;
    color: #8a9299;
}

/* Tick boxes and radios are 13px by default and sit on the same faint edge. */
.form-horizontal input[type=checkbox],
.form-horizontal input[type=radio] {
    width: 15px; height: 15px;
    vertical-align: -2px;
    accent-color: #337ab7;
}

/* The required-field asterisks the labels already carry. */
.form-horizontal .red { color: #c0392b; font-weight: 700; }

/* The days-of-the-week row on the repeat panel. Boxed so the seven read as one
   group of choices rather than seven loose words. */
.repeat-dow {
    display: inline-block;
    font-weight: normal;
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    border: 1px solid #b5bdc5;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    user-select: none;
}
.repeat-dow:hover { border-color: #337ab7; }
.repeat-dow input { margin-right: 4px; vertical-align: -2px; }
/* :has is what lets the chip itself show the state; without it the tick alone
   still says which days are on, so nothing is lost on an older browser. */
.repeat-dow:has(input:checked) {
    border-color: #337ab7;
    background: #eaf2f9;
    color: #1f4e79;
    font-weight: 600;
}

.nowrap { white-space: nowrap; }
.cal-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------
   Calendar views
   ------------------------------------------------------------------ */

.cal-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

table.cal { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
table.cal th {
    padding: 8px 6px;
    background: #fafbfc;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-soft);
}
table.cal td {
    border: 1px solid var(--line);
    vertical-align: top;
    height: 108px;
    padding: 4px;
    width: 14.28%;
}

.cal-num { font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; }
.cal-out { background: #fafbfc; }
.cal-out .cal-num { opacity: .45; }
.cal-today { background: #eef4f9; }
.cal-today .cal-num { font-weight: 700; color: var(--brand-dark); }

.cal-item {
    display: block;
    font-size: 11.5px;
    line-height: 1.35;
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 2px;
    background: var(--ok-bg);
    border-left: 3px solid var(--ok);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-item:hover { text-decoration: none; filter: brightness(.97); }
.cal-item.cal-t { background: var(--warn-bg); border-left-color: #c98a00; }
.cal-time { font-weight: 600; margin-right: 4px; }
.cal-room { color: var(--ink-soft); }
.cal-more { font-size: 11px; color: var(--ink-soft); padding-left: 4px; }

/* ---------------------------------------------------------- room grid */

table.rooms-grid { table-layout: fixed; }
table.rooms-grid th, table.rooms-grid td { text-align: center; padding: 6px 4px; font-size: 12px; }
.rooms-name {
    text-align: left !important;
    width: 200px;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}
thead .rooms-name { background: #fafbfc; }

.cell-free { background: var(--ok-bg); }
.cell-busy { background: #fff; }
.cell-shut { background: #f0f1f3; color: #b9bcc1; }

.cell-book { color: var(--ok); font-size: 11px; }
.cell-item {
    display: block;
    font-size: 11px;
    padding: 1px 3px;
    margin-bottom: 2px;
    border-radius: 2px;
    background: #e8eff6;
    border-left: 3px solid var(--brand);
    color: var(--ink);
    white-space: nowrap;
}
.cell-item.cal-t { background: var(--warn-bg); border-left-color: #c98a00; }
.cell-item:hover { text-decoration: none; filter: brightness(.97); }

.key {
    display: inline-block;
    width: 12px; height: 12px;
    border: 1px solid var(--line);
    vertical-align: -2px;
    margin-right: 2px;
}
.key-free { background: var(--ok-bg); }
.key-busy { background: #fff; }
.key-shut { background: #f0f1f3; }

.nav-sep {
    padding: 14px 18px 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa1a9;
}

/* The public request form has no sidebar, so it needs its own measure. */
.public-form { max-width: 820px; margin: 0 auto; }
.public-form .field input[type=text], .public-form .field textarea, .public-form .field select { max-width: 100%; }

/* Room description: WYSIWYG markup out of the old editor. */
.wysiwyg-editor {
    min-height: 120px;
    max-width: 560px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    overflow-y: auto;
}
.room-details { max-width: 420px; }
.room-details div { margin: 0; }
.room-details br { line-height: 1.4; }

/* ------------------------------------------------------------------
   The 24-hour strips on Detail View and Detail Room View.

   detail.php stacked one full-width block per room, with the name above and
   the hours running the whole way across. Flex reproduces that and keeps it
   filling the page at any width, instead of a fixed pixel strip.

   Colours are the originals from includes/header.php:
     closed #888, free #DFF0D8, booked #337AB7
   ------------------------------------------------------------------ */

.timeline-bar { margin-bottom: 12px; }
.tl-key { margin-right: 14px; color: #888; font-size: 12px; }
.tl-swatch {
    display: inline-block; width: 14px; height: 14px;
    vertical-align: -2px; margin-right: 4px; border: 1px solid #ccc;
}
.tl-swatch.closed { background: #888; }
.tl-swatch.free   { background: #DFF0D8; }
.tl-swatch.booked { background: #337AB7; }

.tl-row {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px dotted #E2E2E2;
}
.tl-row .work-detail-title { margin: 0 0 6px; font-size: 15px; }

/* the hour ruler, one label per hour across the full width */
.tl-hours { display: flex; width: 100%; }
.tl-hours .tl-hour {
    flex: 1 1 0;
    min-width: 0;
    font-size: 10px;
    color: #999;
    border-left: 1px solid #eee;
    padding-left: 2px;
}

/* 48 half hours, stretched edge to edge */
.tl-strip { display: flex; width: 100%; }
.tl-block {
    flex: 1 1 0;
    min-width: 0;
    height: 22px;
    border-right: 1px solid #fff;
}
.tl-block.tl-hourstart { border-left: 1px solid #d9d9d9; }
.tl-block.closed { background: #888; }
.tl-block.free   { background: #DFF0D8; }
.tl-block.booked { background: #337AB7; cursor: pointer; }
a.tl-block.booked:hover { background: #285f8f; }